|
CSS - Wp Refuses To Obey My Horizontal Alignment Css!
WordPress 3.0.4, multisite network enabled,
local installation with MAMP 1.9.4 (PHP 5.3.2) WordPress Theme: Twentyten (child) Browsers: FireFox 3.6.13, Safari 5.0.3 Problem: Have four divs within a container div. CSS validates. Moreover, the html & CSS do display without a hitch on a hand-coded website using HTML 4.01 Transitional//EN. They also display perfectly up at jsfiddle.net/EVErR. However, the same code in a WordPress Page is behaving unexpectedly: the four divs are floating left, one after the other, but stepped down so that they resemble a staircase. See screenshot at imgur.com/ufw2i. The CSS: /* div layout for displaying 4 small boxes horizontal alignment */ div.box-container { display: inline; margin: 0pt; padding: 0pt; width: 640px; background-color: rgb(229, 231, 225); position: relative; float: left; overflow: hidden; } div.small-box { border: 1px solid rgb(153, 51, 102); margin: 20px 0px 20px 15px; padding: 0.325em; float: left; display: inline; vertical-align: top; background-color: rgb(255, 244, 227); width: 128px; line-height: 0.85em; max-height: 8em; min-height: 8em; position: relative; } HTML: <div class="box-container"> <div class="small-box">SOME TEXT AND AN IMAGE</div> <div class="small-box">SOME TEXT AND AN IMAGE</div> <div class="small-box">SOME TEXT AND AN IMAGE</div> <div class="small-box">SOME TEXT AND AN IMAGE</div> </div> What am I missing here? Help much appreciated! Similar TutorialsSorry if i repeat someone else's question, i've actually stumbled upon lots of solutions for this matter, but, as usual, there just seems to be no "only one" solution, so maybe someone here knows. In the good old days if i wanted to center all kinds of stuff, i'd use <div align="center">all kinds of <stuff></stuff></div>. Now i visit the w3c site and see the beautiful "deprecated" word by the "align" property, so i guess they once again need us to bash our heads against the walls with the most stupid invention in mankind: css. So can someone tell me how to center div's content horizontally? And not just text, i mean images, other tables or other kinds of things. If i assume correctly: If i use text-align - this is meant for text only If i use margin: 0 auto - that would align the div itself and not the content and we would need to know its width So is there any normal solution to this? I have a horizontal list using <ul> but the last two items in the list i want aligned to the right of the page but how do i do this? PHP Code: <div id="menu"> <ul> <li>home</li> <li>browse</li> <li>artists</li> <li id="selected">collections</li> <li>news</li> <li>how to buy</li> <li>trade</li> <li>mailing list</li> <li>e-card</li> </ul> </div> above is my list Hello all, I am trying to make a horizontal nav bar using a list. Everything was going good until I tried to add an image (essential a line) to seperate each <li>. When I did this, the height of the nav bar expanded and it moved the entire list down about 15 pixels or so. I am attaching an image before I added the image and after I added the image to show. Here is my css code for before I add the image: PHP Code: #navbar { height:37px; line-height:33px; padding: 2px 0 0 10px; vertical-align:top; background: url(images/linkbarbg1.png) repeat-x; font-family: Tahoma, Georgia, "Times New Roman", Times, serif; font-size: 18px; color: #FFFFFF; } #navbar ul { vertical-align:top; margin:0; padding:0; border: 0px solid #000000; } #navbar ul li { display: inline; } #navbar ul li a { display: inline; text-decoration: none; padding-top: 5px; padding-bottom: 4px; padding-right: 10px; padding-left: 10px; color:#FFFFFF; } #navbar ul li a:hover { height: 31px; background:url(images/linkbarbg1hover.png) repeat-x top left; background-color: #FF3300; } And HTML: PHP Code: <div id="main"> <div class="leftshadow"> <div class="rightshadow"> <div id="header"><img src="images/logo1.png" /></div> <div id="navbar"> <ul> <li><a href="#">Milk</a></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> </div> </div> And here is what it looks like: My CSS Code is the same for after, here is my HTML code for after: PHP Code: <div id="main"> <div class="leftshadow"> <div class="rightshadow"> <div id="header"><img src="images/logo1.png" /></div> <div id="navbar"> <ul> <li><a href="#">Milk</a></li> <li><img src="images/linkbarseperator1.png" /></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> </div> </div> and here is what is looks like: Is there a way to fix this? UPDATE I have noticed the same thing happens even when it is not a list. Therefore, it must be due to some other factor...does anyone have any ideas? HI Guys, I'm trying to create some CSS to contain an image gallery. A query runs which grabs all the images for a certain item/article. I then output the query as a loop, and it populates a div with images. It works pretty good, but if one image is bigger than the others, it throws off the alignment. How can I force each row of photos to be horizontally even? You can see the output results here http://details.at/photo_test.cfm <!--- Query ---> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style> #maindiv { padding:0 0 1em 2em; width:550px; float:left; } div.img { margin:3px; height:auto; width:auto; float:left; text-align:center; } </style> </head> <body> <DIV id="maindiv"> <H2>Photos</H2> <CFOUTPUT QUERY="photo_file_info"> <div class="img"> <a href="http://google.com" target=new> <img src="http://details.at/imagehost/classifieds/aircraft/139/s_#photo_file#"> </a> </div> </CFOUTPUT> </DIV> </body> </html> I'm setting up a template for a page where there's essentially three rows. Header, content, and footer. I set the entire table to be 100% vertical and I've also set the table in row 2 (the content row) to be 100% vertical. But when I view the page in IE, the content row only stretches as much as there is content, but I'd like it to stretch and hit the bottom edge of the page even if there is not enough content. Any ideas? Hi this is my first post. I'm having trouble making a horizontal navbar with a picture background. here is the vertical menu. http://school(dot)timswildwackyemporium(dot)com/NewMouseOver/navtest.html replace (dot)s with period I want to make the buttons next to each other, but with about 10px space in between them. Thanks. Hey guys nice forums.....am a css noobie i wanna know one thing how do i make a div stretch horizontally 100% , basically i want my website to be divided into 2 colors black and white the lower part would be black and the upper part would be white , now am not using a div container as i read through previous topics before so am using 2 divs as follows <div id="White">White area</div> <div id="Black">Black area</div> when i preview in IE i see the colors as i want but the divs do not stretch 100% as i said in the css. how do i do it ? hope i made myself clear on this I don't have an external webserver so i'll explain as best I can. I have a left and right section of my webpage each with their own background. The problem is a white gap between to the two backgrounds. I set the margin and padding on everything to 0 and it has no effect. This occurs in IE and FF. PHP Code: <html> <head> <style> body {margin: 0; padding: 0;} .left {float: left; background-image: url('background_left.jpg'); height: 100%; width: 300px; background-repeat: no-repeat; background-attachment: fixed; margin: 0; padding: 0;} .right {background-image: url('background_right.jpg'); background-repeat: repeat-x; height: 100%; margin: 0; padding: 0;} .menu {} .content {} </style> </head> <body> <div class="left"> <div class="menu"> </div> </div> <div class="right"> <div class="content"> </div> </div> </body> </html> Has anyone created a CSS horizontal fly-out menu list? I have a 3 level navigation list. The level 1 has 5 items, the first item of which has no sub-list. How can I get the level 2 and 3 lists to fly-out at the same level as its parent item? For my horizontal drop-down menu, the menu items that overlap the content disappear for some reason in IE7. Here is the link... sweetless.zxq.net I am an absolute newbie to CSS, so I'm not sure if I am missing something really simple? -S I want to show 2 divs, and allow the user to horizontal scroll (in a surrounding div with overflow:hidden and white-space:nowrap) to the next 2 divs. It works fine if I use images with full widths. But... Issue I'm running into is this, if i use float:left, it wraps the divs to the next line and doesn't expand horizontally past the width of the div. If i use display:inline, i can't set the widths of the divs, and since they are text based, they show up as tiny divs, only the width of the text. So, what would be a solution here? CSS Code: #wrap {
padding:30px 0 0 0;
width:500px;
height:310px;
border:1px solid black;
white-space:nowrap;
overflow:hidden;
}
#wrap div {
display:inline;
width:245px;
}
HTML Code: <div id="wrap">
<div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></div>
<div><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></div>
</div>
and obviously the javascript would be included to allow the div to scroll onlick. But I just need the initial setup of this. Hi ppl I'm trying to figure out how to do the following list, with CSS Is there any way that the boxes can accomodate themselves based on the width of their container's space? I mean, if the width of the site is reduced, maybe some box from the 1st row will go down, and so... Thanks Hi, I'm trying to make a horizontal list using li tags. I got the text to align horizontally but the bullet icons I want to use (or even when I try with the default bullets) don't appear. Can anyone help me out with this? Here's the code : Code:
#onlineToolsNav ul {
margin-top: 0px;
margin-bottom : 0px;
margin-left : 5px;
padding: 0px;
line-height: 25px;
white-space: nowrap;
display : inline;
}
#onlineToolsNav li {
display: inline;
list-style-image: url(onlineArrow.jpg);
list-style: url(onlineArrow.jpg);
}
#onlineToolsNav li:before {
content: url(onlineArrow.jpg);
}
#onlineToolsNav li.first:before {
content: " ";
}
<div id="onlineToolsNav">
<ul>
<li><a href="link1.html">link1</a></li>
<li><a href="link2.html">link2</a></li>
<li><a href="link3.html">link3</a></li>
<li><a href="link4.html">link4</a></li>
<li><a href="link5.html">link5</a></li>
<li><a href="link6.html">link6</a></li>
</ul>
</div>
Thanx Olografix I've been working on a site and have a problem with the horiztonal positioning of a div. At http://www.alphaworks.co.uk/problems/nicewag1/ I would like the position of the div with the id "page_footer" to move to the leftmost position. Can someone point out the mistake I'm making? Thanks, Geoff In the html below (see also http://www.creatief-denken.be/opl47k.html) I have in IE a horizontal scrollbar and a vertical scrollbar. In the #contentRight div I use the command "overflow: auto" in order to let the text scroll vertically. I want to get rid of the horziontal scrollbar but I don't want to use the command "overflow-x: none" and "overflow-y: auto", because then the vertically scrolling disappears completely on a MAC (OSX). I have tried already in many ways (change the width of the div's) to let the horizontal scrollbar disappear but it doesn't work. Is there an easy way to get rid of this horizontalscrollbar? This is the HTML: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<style type="text/css"><!--
.tekst { color: #4c5ea1; font: 11px Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; text-align: justify; margin-top: 0px; line-height: 16px;}
#contentRight {position:relative; width:490px; top:-10px; right:0px; z-index:100; voice-family: "\"}\""; voice-family:inherit; width:505px; margin-left: 20px;}
/* Again, "be nice to Opera 5". *//*#contentRight {width:450px;}*/
#contentRight p {width:420px; font:12px/16px arial, helvetica, saborder-left-width: 10px; margin: 0px 0px 10px 0; padding-right:0px; padding-left:0px;}
#contentRight img{ border-bottom-style: solid; border-bottom-color: #9DEFC7;border-right-style: solid; border-right-color: #9DEFC7; border-left: 15px; border-left-style: solid; border-left-color: #9DEFC7; border-top-style: solid; border-top-color: #9DEFC7; }
#contentRight div { font-size: 11px/16px arial, helvetica, sans-serif; height: 335px; overflow: auto; width: 465px; }
H1 { color: #0C0F7E; font-weight: 400; font-size: 32px; font-family: Arial; text-align: left; text-decoration: none; line-height: 32px; margin-bottom: -5px;margin-left: 0px;}
-->
</style>
</head>
<body bgcolor="white" text="black">
<table border="0" bordercolor="red" width="100%" height="100%" align="center">
<tr height="100%">
<td align="center" height="100%" valign="top">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0">
<tr height="435">
<td colspan="3" height="435" width="510" bgcolor="#9DEFC7">
<div id="contentRight"><br>
<div class="tekst">
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br><br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>
bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br>bla bla bla<br>bla<br></p>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
www. cooperworkskilns.com The CSS worked well for a vertical navbar, but I haven't gotten it to work horizontally. I added a float:left to see if it would do it. This isn't working in IE. Lol, its created a rather interesting stairstep effect. Is there a way to make it span evenly across the page without adjusting the width of each <li>? Also, for some reason the footer <div> margin isn't working in FF. If you look at IE vs FF, there is much more space above the Copyright line. #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { margin: 0 0 0 0; } #navbar a { float:left; display: block; text-align:center; color: #000; background-color: #FFF; width: 9em; padding: .2em .8em; text-decoration: none; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } #navbar a:hover { background-color: #003366; color: #FFF; border-top: 1px solid #fff; border-left: 0px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } PHP Code: echo "<div class=\"tbody2\">"; echo "<div class=\"client\">Client<div class=\"clientname\">Client Name</div></div>"; echo "</div>"; Using the above code it displays Client on top of Client Name. How do I make Client name appear to the right of Client using only css? I think I have the basics down to making my ul navigation list display as a nav bar. The rules I am using are
Code:
div#navigation
{
background: #7799aa;
color: #ffffff;
margin: 4px 0 0 0;
}
div#navigation ul { list-style-type: none; margin: 0; padding: 8px; }
div#navigation ul li { margin-right: 50px; width: 200px; display: inline; }
div#navigation ul li a { color: #ffffff; width: 400px; }
div#navigation ul li a:hover { background: #255599; }
and the corresponding html Code:
<div id="navigation">
<ul>
<li><a href="/" title="The Company">Company</a></li>
<li><a href="/" title="Our Solutions">Projects</a></li>
<li><a href="/" title="What We Do">Services</a></li>
<li><a href="/" title="Contact Us">Contact</a></li>
<li class="last"><a href="/" title="What people are saying">Testimonials</a></li>
</ul>
</div> <!-- navigation -->
Now, the problem is that I am trying to make the links seem like "buttons" or blocks. I cannot get them to a) have a width; or b) expand to the width of the list item (which I cannot give a specified width to either). I am still working with the design in firefox so I haven't ventured into getting it to work in IE. The XHTML is completely valid as is the rest of the stylesheet. I can post more if necessary, but does anyone have a bone? I've tried the tutorials on CSS menus but can't seem to get it to work right for my project. I want a spacer to seperate the buttons at 1 pixels wide but currently it's about 10 pixels wide. I've adjusted until i'm blue in the face can somebody help? The code is below: Code:
<tr>
<td width="766">
<div id="navcontainer">
<ul>
<li><a href="">Home</a></li>
<li><a href=""> Project Status</a></li>
<li><a href=""> Tasks</a></li>
<li><a href="">General Information</a></li>
<li><a href="">Completed Tasks</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
CSS Code:
body,html {
margin: 0;
}
#navcontainer ul {
list-style-type: none;
text-align: center;
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0.2em 1em;
color: #fff;
background-image: url(images/back.gif);
height: 24px;
line-height: 23px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #960033;
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
background-image: url(images/backover.gif);
}
--- |
|||||||