I am trying to format a list of links with some css, I am having trouble though.
Please look at the image below...
<div class="tag-list">
<a href="/tag/htaccess" >.htaccess</a>
<a href="/tag/css-2" >css</a>
<a href="/tag/database-2" >database</a>
design pattern
<a href="/tag/mysql" >mysql</a>
<a href="/tag/pdo" >PDO</a>
php
server
web-design
</div>
the code...
<style>
.tag-list a {
color: #FFF;
text-transform: uppercase !important;
background:#444;
padding: 4px 6px 4px 6px;
-moz-border-radius:3px;
border-radius:3px;
font:.8em Helvetica,Arial,sans-serif;
margin: 1px 0px 0px 0px!important;
display: block
}
</style>
My goal is to get this list of links to LOOK like that except they should only be the width of the text + padding instead of the full width. I have tried wrapping each link in the div, wrapping the div around the block of links like I have in the code above, If I wrap EACH link in a seperate div and remove the display: block it will show them as the proper width for each link and each on a new line, the only problem with that is that the margin does not work to let me space them out top and bottom.
I'm sure this is a simple fix for someone who knows more about css
jsbin.com link
Thanks for any help
Desired end result something like this...
When adding float: left; clear: both; it makes my other divs show up under it like this...
These easiest thing to do would be at add a float property. This essentially shrink wraps elements. I've also added a clear property to get them to stack.
.tag-list a {
color: #FFF;
text-transform: uppercase !important;
background:#444;
padding: 4px 6px 4px 6px;
-moz-border-radius:3px;
border-radius:3px;
font:.8em Helvetica,Arial,sans-serif;
margin: 1px 0px 0px 0px!important;
display: block;
float: left;
clear: both;
}
I believe this is what you want: http://jsfiddle.net/thnT8/
Note: I'd encourage you to utilize better markup, such as an unordered list. Not only it is more semantic, but it would allow better hooks and avoid the use of floats.
UPDATE
Per the comments and my note above, here's the code: http://jsfiddle.net/84g6Q/1/
Replacing display: block; with:
float: left;
clear: both;
Should work.
You can avoid using floats and clears by making it a list and changing the display of your anchor tags to inline-block: http://jsfiddle.net/hZLzZ/
You set the display to block, that means it will span across it's entire container.
Just remove the display: block, float the elements left, add clear:both to get them to stack, and set the right padding to what you want:.
Here it is using your code: http://jsbin.com/ecoxay/2/edit
Related
I've been staging up a site and building the basic layout when I ran into a little problem. I want to create a "notched" navigation, but I don't know the first thing about doing this.
I've tried to create a to be positioned below my (with the idea that I could either create [with CSS or using an image] a white triangle) that could be aligned with the bottom of my creating the "notched" effect. I've yet to be successful with this and was hoping someone with css // html wizard status skills could be of assistance.
ps. If you need more info just let me know - I'm a bit new to stackoverflow
Make your NAV LI tags & the A tags within them stretch all the way down to the top of your content block.
When an LI is the 'current' tag then place a triangle graphic as the background of the A tag within it.
li.current a {
background:url(triangle.png) no-repeat center bottom;
}
You'll probably want the triangle to be blue the same as the blue bar at the top of the content block.
Cappuccino is using the following css to mark the link tag.
<style>
#navmarker {
width: 1px;
height: 0;
position: relative;
margin-top: -0.7em;
margin-left: auto;
margin-right: auto;
border-bottom: #FFD48E solid 0.8em;
border-top: none;
border-left: transparent solid 0.8em;
border-right: transparent solid 0.8em;
}
div {
display: block;
}
</style>
Try to create a div and use the above css it worked for me.
<div id="navmarker"></div>
(I'm looking at this site in IE 8.) As you can see the content floats center knocking the sidebar below it. It works perfectly in Chrome. I can't think why the float:left; command isn't working in IE.
#content {
margin: 5px 0 5px 5px;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
width:65%;
float:left;
}
Thanks for your help.
Tara
If you add overflow: hidden to your ul#list-nav then that will prevent the floating navigation messing up the rest of the document.
As for why the navigation is displaying strangely, it's because you're specifying your widths and layout badly. What you should be using is this:
ul#list-nav {
overflow: hidden;
}
ul#list-nav li {
width: 16.66%;
float: left;
display: block;
margin: 0;
padding: 0;
}
ul#list-nav li a{
display: block;
margin-left: 1px;text-decoration: none;
padding: 5px 0;
background: #754C78;
color: #EEE;
text-align: center;
}
That way, the width of each element is exactly 16.66%, rather than 16.62% + 1px
what i currently see in IE8 is:
the problem is that menu links are too wide in IE. You've set the width to 16.62% to each anchor in the menu and that's too wide for IE. Since the width of your content is fixed I suggest you set fixed width in pixels (132px) for these links so they fit on one line and look consistent across browsers, also removing li style setting margin: 0.5em 2em to fix positioning problem in IE.
After my fix I see this:
To me it looks like theres nothing really wrong with the content.
In ie6-ie9 the menu seems to be failing in some way.
and also the menu goes in two rows which pushes everything down. I'm not sure if that is all due to the s letter or not at this point..
Note that the extra letter s seems to be somewhere between #menu and #content .containers.
Edit2: the problem is clearly the menu a width which is too much and the menu goes into two rows.
The way menu is often done is that the ulor outer div holds the color and then the menu li are either centered within that or just plain floated to the left. this way you get the full height feel without the tourbles of the menu braking like this ( though if you do it without ignoring the width.. it is possible with too many menu items and so on. )
add clear:both; on menu container.
note: is broken in Firefox to
Quick question. I was writing out some code and was curious if there is a way to add a border on a div that is 5px within the object - as in not on the actual edge of the div. I checked out WC3 and didn't see any specs - but I may have missed it.
In my case I'd be using a dashed border 5px inside the div, to create an effect like the div had been sewn to the rest of the site. I can do it fairly easily with background-image but why add KB when a line or two of css could do it.
I would assume it would be something like "border-position" or "border-distance".
Thanks in advance.
I've never come across any property that resembles this, so I'd have to say, simply, 'no.'
But then I'd feel bad for that, so all I could really suggest is wrapping the div you wish to 'sew on' within another div and styling the parent with the same background-color to emulate the look you're after. Here's some css for a possible take:
.wrap {
border-width: 0;
background-color: #ffa;
width: 50%;
padding: 0.5em;
}
.wrap #panel {
background-color: inherit;
height: 6em;
border: 5px dashed #f90;
text-align: center;
}
And some html:
<div class="wrap">
<div id="panel">
<p>This panel should look kinda sewn-on.</p>
</div>
</div>
And, finally, A JS Fiddle demo
Okay, having just rediscovered this answer (thanks to the up-voter!), I can, now, provide an actual CSS-only no-extraneous-elements solution, using box-shadow:
#panel {
background-color: #ffa;
height: 6em;
border: 5px dashed #f90;
text-align: center;
width: 50%;
margin: 30px auto 0 auto;
box-shadow: 0 0 0 15px #ffa;
}
JS Fiddle demo.
The fourth parameter is the key, it defines the, uh, 'spread' of the shadow (the third parameter defines the 'fuzziness'/'diffusion' which in this case is 0), using the same background-color as the element itself gives the illusion that the border is within the element, while it's actually a shadow of the element extending out from the element.
Thats what IE used to do in quirks mode. With CSS3 box-sizing you can switch between the two modes, but I'm not sure how the support is at the moment
See http://www.quirksmode.org/css/box.html for more infos.
I want to do so the size of the bubble, is auto-adjusting after the text(comment) which is inside the div..
Firstly heres the code:
.bubble {
font-size: 12px;
margin-bottom: 0px;
}
.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #000;
}
.bubble blockquote p {
display: inline;
margin: 0px;
padding: 0px;
font-size: 18px;
}
.bubble cite {
position: absolute;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 5px;
background: transparent url(b/tip.gif) no-repeat 20px 0;
font-style: normal;
}
And the page:
<div class="bubble">
<blockquote>
<p>
Hello, my name is Azzyh
</p>
</blockquote>
<cite>I wrote this today</cite>
</div>
Now as i said, i want it to auto adjust to the text, so the "bubble" is around "hello, my name is azzyh"..
Not like how it is now:
http://img341.imageshack.us/img341/8303/exampleu.png
As you see it goes all out to the browser's right+left end..
Check the image, you'll see the line (the "box") where the text is, are too big for the text. I want css to adjust the box after the text.. so the "lines" gets around the text "hello my name is" sorry for my english
See this image:
http://img17.imageshack.us/img17/6057/exampleph.png
The "red" is how i want it to be..
How can i do this?
Thanks
div elements are block-level elements that, by default, stretch as far to the left and right as their containing blocks will allow.
In order to get the width of the div to auto-adjust, you'll have to convert it to an inline element, using the same style as you put on the p: display: inline;
Note that this may have the unintended side effect of not automatically forcing each div onto a new line. Without more information, though, I'm not entirely sure if that would be good or bad in your layout.
A similar problem I had was solved by applying the following CSS:
display:inline-block;
I wanted a link to look like a button but not expand the background to fill the width of the containing DIV.
Supported in nearly all browsers, including partial support in IE6 and IE7 but only where element has 'inline' as a default. There are some alternative properties to gain cross-browser support. There is also something on Google Code for setInlineBlock, but I haven't tried this myself.
Move your border property
border: 1px solid #c9c2c1;
from
.bubble blockquote {}
into your
.bubble blockquote p {}
and that should put the box where you want it.
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.