I am working on the css for a website and am trying to determine the best approach for the navigation menu. The layout of the menu is as follows:
between col 1 and 2, and also between col 2 and 3 are double vertical lines, which because of their style will probably need to be an image.
SO, my question is this:
Semantically, all of these links are part of one unordered navigation list. But, I can't find any way to create such a list using css only that will work in IE. The images between list items only muddles it up more. Is there a clean way to do this?
My second approach was to create 3 columns, and place a list in col 1 and col 3. But this still seems messy with the image dividers. I thought about using li:after to place the images, but IE7 doesn't recognize the "content" property.
Right now, it seems like the cleanest way to build this is without lists. But then I feel like I'm losing proper semantics. Is there a better approach that I'm not thinking of? The layout is very tabular, so I could certainly make it a table . . . : )
Thanks!
I solved as follows for links where you substitute the names you need and the class image with the image and your measurements.
<style type="text/css">
ul{
width:400px;
height:200px;
}
ul li{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
height:99x;
width:100px;
}
.left{
float:left;
}
.right{
float:right;
}
.second{
margin-top:100px;
margin-left:-100px;
}
.image{
background:red;
border-left:3px double gray;
border-right:3px double gray;
display:block;
float:left;
height:200px;
width:194px;}
</style>
<body>
<ul>
<li class="left">Home</li>
<li class="left second">Home</li>
<li class="image">Home</li>
<li class="right second">Home</li>
<li class="right">Home</li>
</ul>
<body>
I hope I can help. A greeting.
I think that you can make one UL with four LIs and give absolute position to first and last li (maybe "events" and "about us"). This can be achieved by pseudo selectors :first-child and :last-child.
Related
I want two add two forms one on left and one on right of the page
and then what i write should be displayed below them.But the problem is it is being shown between the two forms.
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space between the two forms</p>
CSS
.login{
float:left;
}
.signup{
float:right;
}
The use of floated element is highly discouraged since there are a lot of other better alternatives that can be used instead.
Best alternatives are
display: inline-block;
CSS
.login{
display:inline-block;
}
.signup{
display:inline-block;
}
Flexbox
If you still want to use floated elements you can use a clearfix. Clearfix is a way an element automatically clears its child elements. For more information read How to use clearfix
Mention the Width property width:50%; it will work
.login{
float:left;
width:50%;
}
.signup{
float:right;
width:50%;
}
<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space between the two forms</p>
Adding style clear:both to your paragraph will help.
.clear
{
clear:both;
}
<p class="clear">This content should be displayed below but it is displayed in space between the two forms</p>
I have a long list of li's.
<ul>
<li>
<img src="test.jpg">
</li>
<li>
<img src="test.jpg">
</li>
//etc
Each li has this styling:
width: 10%;
display: inline-block;
vertical-align: middle;
When I get to more than 10 li's in a row, they go on to the next row.
Is this the correct way to do it? or should I wrap each 10 li's into something that breaks the line? What the best/correct method? i intialy chose this method as it would be easily to loop out data from a database.
That is a perfectly valid method, and a very easy one to change. Let's say you decide actually, you want five on a line. Just change 10% to 20% and ta-da! Instantly done.
Just be aware that whitespace can be an issue, if you have spaces between your <li> elements (but if you're properly minifying your HTML, then you shouldn't have this issue).
Another point, it may be more meaningful to use a higher-level language such as LESS to generate your CSS. In LESS, you can do this:
width: (100% / 10);
This will calculate the percentage for you, with 10 being the number you want per line. What was already easy is now even easier (especially if you want, say, seven on a line). CSS calc(100% / 10) can do it too but it's not compatible with older browsers.
Just should create a div list with table properties. Like this DEMO
.table{
display:table;
margin:0;
padding:0;
}
.cell{
margin:0;
display:table-cell;
}
img{
max-width:100%;
}
I've gotten stuck on how to code the css for these inverted curvy tabs that were supplied by a design agency.
see here: http://max-guedy.com/images/tab.png
EDIT added example with hover state.
I created a demo how I would do it:
jsBin demo
We set the brown color to the whole ul element
a 25x52 sprite image .png of the curve : (will change bg-position on hover)
http://img401.imageshack.us/img401/258/bg2d.png that we will set to the li element but with no bg color.
The most importsnt here is to setup a higher z-index to the li elements, decreasing it on hover
Take care to set to the a elements left padding and respective -left margin to allow the anchor to 'hide' below the previous element image.
Done that you can have wide and wider links and your template will do the work!
and this CSS:
ul#nav{
height:26px;
background:#A15049;
border-bottom:1px solid #fff;
}
ul#nav li{
position:relative;
background:transparent url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right top;
height:26px;
display:inline;
float:left;
padding:0 25px 0 5px;
z-index:1;
}
ul#nav li a{
padding-left:24px;
margin-left:-24px;
height:26px;
display:block;
color:#fff;
}
ul#nav li:hover{
z-index:0;
background: url(http://img401.imageshack.us/img401/258/bg2d.png) no-repeat right -26px;
}
ul#nav li:hover a{
background:#CE392C;
}
It is just about possible to achieve this kind of thing with CSS.
Very difficult, but possible.
By default, border-radius of course only gives you regular rounded corners.
You can stretch them to some interesting shapes by adjusting the radius values. This will get you some of the way to your goal.
But the real trick here, to get the round-out parts of the tabs, is to use the CSS :before and :after pseudo-selectors to create additional styling elements, to which you need to add further border-radius.
The technique is described here: http://css-tricks.com/better-tabs-with-round-out-borders/ ... albeit for a fairly simple vertical-shaped tab. But it does a good job of explaining how to achieve the turn-out effect, which will be critical to you if you want to do this in CSS.
Bear in mind also that none of this will work in old versions of IE. IE8 does support :before and :after, but not border-radius. And while hacks like CSS3Pie exist to fix that, I wouldn't recommend using them for this kind of thing. It is likely to break.
If all the above sounds quite tricky and not really worth it, I would tend to agree. I think you'll find that a few simple images will work much better for your tabs in this instance. You could also try SVG to draw them if you want to be clever, but this will also have issues with old versions of IE.
Hope that helps.
You're easier off using images.
But if you insist on using CSS, I'd say that you need to use a lot ofborder-radius
That's an interesting challenge.
My first idea was to apply a skew transform to the tabs, a border radius to the top right corner and take care of the rounded lower part using a pseudo-element.
Unfortunately, this looks ugly http://dabblet.com/gist/2759785
Still, it bugs me that there must be a better way to do it with pure CSS.
I would say it's possible, but the amount of time that it would take would not be worth it, especially because it won't work in IE < 9...
There is a good tutorial that I have used in the past at css-tricks
However, as others have pointed out, I would recommend using images.
It really doesn't take THAT much CSS to achieve this anymore. Granted you'll have to toy with the radius' to get the desired slant.
HTML
<div role="tablist">
active tab
inactive tab
inactive tab
</div>
<div class="pane">
<section id="active-tab1" role="tabpanel">
<p>Show whatever</p>
<p>You Want</p>
<ul>
<li>inside</li>
<li>This</li>
<li>Section</li>
</ul>
</section>
<section id="active-tab2" role="tabpanel">
</section>
<section id="active-tab3" role="tabpanel">
</section>
</div>
CSS
[role=tablist]{padding:15px 15px 0;margin-left:88px;}
[role=tab]{
color:#222;
display:inline-block;
padding-left:15px;
padding-right:15px;
text-decoration:none;
line-height:44px;
position:relative;
min-width:150px;
text-align:center;
border-radius:15px 15px 0 0}
[role=tab]:hover{background-color:#ecf0f1;color:#222;}
[role=tab][aria-selected=true]{
background-color:#3498db;
color:white; }
[role=tab]:before,
[role=tab]:after{
content:'';
border-bottom:10px solid #3498db;
position:absolute;
bottom:-10px;
width:44px;
height:22px;
z-index:1; }
[role=tab][aria-selected=true]:before{
left:-44px;
border-right:10px solid #3498db;
border-bottom-right-radius:25px;
}
[role=tab][aria-selected=true]:after {
right:-44px;
border-left:10px solid #3498db;
border-bottom-left-radius:25px;
}
.pane{
background-color:#3498db;
padding:25px;
margin-left:5px;
margin-right:5px;
color:white;
border-radius:15px;
}
And odds are you can slim even that down, made it in about 10 minutes.
http://jsfiddle.net/darcher/819yz9Ly/
<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>
<ul class="clearfix">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
The first li contains more content than the rest.
So, I have the following problem:
problem http://img830.imageshack.us/img830/240/problemc.png
But how do I move the next row down, so it looks like that:
want this http://img440.imageshack.us/img440/9750/solutionm.png
I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.
Any ideas on how to do this?
Solution for IE:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
The best solution is to use a little-known display style called table-cell.
I've had to do this a few times. Here's how you do it:
/* -*- CSS -*- */
ul li .wrapper
{
display:table-cell;
width:100px; /*replace here*/
min-height:100px;/* " " */
}
ul li
{
float:left;
display:inline-block;
}
ul
{
display:table;
}
...
<!-- HTML -->
<ul>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
</ul>
How this works:
When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)
The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.
the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.
There is ONE other solution that might work, however I haven't tested it.
/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }
Its not as ugly, but it should work by making the box model force the alignment as well.
First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.
Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add clear:both; to the forth li (and other you may need) and force it down. This would be the only way to do it with left floating lis.
You can't do this using only float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.
I am trying to find a CSS tutorial that would enable me to create a 4x3 grid of features like on this site http://www.ewedding.com/features.php
If anybody can suggest one it would be great! All the tutorials that I have found seem to style the entire page rather that a particular part of the page.
Thanks in advance
Decbrad
the page you link uses an UL as outer element and an LI as inner element so you have this:
<ul>
<li>Feature1.1</li>
<li>Feature1.2</li>
<li>Feature1.3</li>
</ul>
<ul>
<li>Feature2.1</li>
<li>Feature2.2</li>
<li>Feature2.3</li>
</ul>
<ul>
<li>Feature3.1</li>
<li>Feature3.2</li>
<li>Feature3.3</li>
</ul>
use a CSS definition like this:
ul{
float:left;
width: //specify the width
display:block;
}
li{
list-style: none;
display:block;
}
etc.
That said, I think a CSS table layout is better for this:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout