tejasamrute
-
Posts
132 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by tejasamrute
-
-
try this way
<style type="text/css">#wrapper{ width: 980px; height:220px; background: green; box-sizing: border-box; margin:0 auto; padding:10px; }.center-container { margin:0 auto; background-color:orange; width:900px;}.block{ text-align: center; width: 300px; height:200px; line-height:200px; display: inline-block; vertical-align:middle; margin: 0px -4px; }.sep{ content: ""; display: inline-block; width: 0px; vertical-align:middle; height: 150px; border-right: 1px solid #fafafa; border-left: 1px solid #b4b4b4; padding: 0;}</style></head><body><div id="wrapper"> <div class="center-container"> <div class="block">About Me</div> <div class="sep"></div> <div class="block">Contact Me</div> <div class="sep"></div> <div class="block">Email Updates</div> </div></div>Note:--- this code doesnt work in IE7
-
they are two different websites....you will have to code your website again with mobile approach using media queries..
-
-
i would give main tag to only that element which is most important on the page.....probably services section or a new product arrival on home page
-
i would go with 2nd.......
-
-
even i have had this discussion with my mates......and i have put the same point.... aside which is considered as a holding content to your main flow...why do you want to rate it<main>.......and if you think it is main you should include it in our main flow....
-
Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Copied from w3schools link
-
It is called Fixed Navigation Bar.......google it you will get a lot of options with animation
-
-
if you are not going with table format you can delete this..
#table { width: 100%; background-color: #98bf21; border-collapse: collapse; border-spacing: 0;}td, th { border: 1px solid #CCC; }ul { list-style-type: none; margin: 0; padding: 0;}a { display: block; width: 60px;}if you are going with table.....delete 'a' & 'ul' only
-
can u post us the screen shot of the error??
-
why do you need colspan.......set the width of the nav to 100%...you have already used ul & li....
-
you have also messed up a little in your html
</table><div id="section"> <h1 style="text-align:center">Welcome to Our Website</h1></div><div id="footer"> Copyright © 2015 eyecyclones Alrights Reserved.</div>
-
since you r just starting with your project......i would reckon you code it in table less layout.....table style is just too old..
as far as you question is concerned u need to do some modifications
body { background-color:#000000; margin:0; /* disable mandatory margin taken by html pages*/ padding:0;}i can also see....your 3rd and 4th link of your navigation is being cut. off
a { display:block; padding: 5px; /*or set the width according to your longest word*/} -
Add navbar-right in ul
<ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#"><span class="glyphicon glyphicon-bell aria-hidden="true"></span> Link</a></li> <li><a href="#"> <span class="glyphicon glyphicon-comment aria-hidden="true"></span> Link</a></li> </ul>
-
@michael....u have messed up your css....
This is the correct way to write css
#section{ position: absolute; width: 1386px; height:1496px; background-color:transparent;}h1 { font-family:"IM Fell English"; color:black; font-size: 18px; text-align:justify;}img { background-images:url('path to your image');} -
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Company Logo</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-bell aria-hidden="true"></span> Link</a></li> <li><a href="#"> <span class="glyphicon glyphicon-comment aria-hidden="true"></span> Link</a></li> </ul> <div class="col-sm-3 col-md-3 pull-right"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> </div></nav>
is its something like this u are trying to achieve?
-
i guess php will be the right language...coz what u are asking needs to deal with databases.....other language can be asp.net but php seems to be more easier than the other
-
seems like something's saffecting your p tag........is there any style overlapping your p tag in other css files...can you also show us your html n css code...to get a better view...of what's going wrong....
-
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><style type="text/css">p { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5;}</style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p></body></html>This code works....
-
-
-
p { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5;}<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
HTML/CSS Align Divs
in CSS
Posted
<style type="text/css">.container { display: table; } .main { width: 600px; padding: 20px; float: none; display: table-cell; background-color: red; } .sidebar { width: 150px; padding: 20px; float: none; display: table-cell; background-color: green; }</style></head><body><div class="container"> <div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, </div> <div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante. </div> </div>