|
HTML - Interesting Float Problem: Free Beer For Soving. :-)
Hi gang,
Have an interesting XHTML/CSS problem - I may be missing something simple, but it's had me stumped for 40 minutes. Much appreciation (and a paypalled bottle of beer if requested ;-) ) to anyone who can solve in Firefox, IE6 and IE7. ------------------ I have a div, called "logobox", centered in the middle of the page. "Logobox" will have 1-4 "logo" elements inside. The logobox is 160px wide & the logos are 80px each, floated left. So if there are 2 logos, they appear alongside each other in 1 row. If there are 4 logos, they are aligned 2x2 alongside each other. This behaviour needs to stay. Here's the problem: If there are 3 logos (or 1 logo), the 3rd logo needs to be *centered* within logobox, not floated to the left/right. So, if there are 3 logos for example, here's the desired layout: -------------Logo Box--------------------- | Logo Logo | | | | Logo | ---------------------------------------------- And here's the current layout: -------------Logo Box--------------------- | Logo Logo | | | | Logo | -------------------------------------------- XHTML/CSS solutions only - server-side processing not allowed as the html is XML-->XSLT generated; JavaScript solutions not allowed because styling with JS is evil. :-) Current HTML: <div id="logobox"> <div class="logo"><img alt="(logoname)" src="images/logo1.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo2.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo3.jpg"/></div> <div class="logo"><img alt="(logoname)" src="images/logo4.jpg"/></div> </div> Current CSS: #logobox { clear:both; margin:13px auto 10px; text-align:center; width:160px; } .logo { background:#FFFFFF none repeat scroll 0 0; border:5px solid #FFFFFF; float:left; height:30px; text-align:center; width:70px; } Cheers, - SuperGrover Similar TutorialsAnyone know of a good one? I want to add one to my site, but the good ones you can't customize for free, and the ones you can customize are lower quality. Right, I want to create a navbar for a site I'm working on. The site structure works like this: Code: -index.php -edit.php?id=# -delete.php?id=# -new.php What I want the navbar to look like is this: Code: --------------------------- |EDIT DELETE NEW [input box]| --------------------------- Where edit, delete and new are 64x32px images. I want each of those images when clicked, send the user to that link, using the input box's number. IE, the input box has 21 in it. User clicks EDIT. User gets linked to edit.php?id=21 OR, user clicks delete. User gets linked to delete.php?id=21 Can it be done, and how? Thanks! -Girvo Hey guys, Im working on a website for a project at the moment and am having some problems with how it is rendering in IE. I have an image floating to the right of some text, and want the text (In two different divs) to wrap around that picture. Works fine in Firefox but doesnt seem to want to work in IE. I've spent this morning trying to get it to work, looking for different fixes around the place but cant seem to get any of them to apply to my code. Any help would be greatly appreciated. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kling:2 Educational Wall Decorations</title>
<meta name="keywords" content="Wall Stickers, Wall Decorations, Educational Wall Stickers, Kling, Kling:2, Static, Childrens Wall, Childrens Decorations, Room Decorations, Childrens Educational Wall Stickers, Education, Early Learning, Child learning, Kids Wall Stickers, Kids Wall Decorations" />
<meta name="description" content="Kling:2 Educational Wall Stickers are a new way to not only decorate your childs room, but to also introduce them to learning in the home environment." />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_header">
<div id="header">
</div>
</div>
<div id="main_body">
<div id="body">
<div id="menu">
<ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="./">Home</a></li>
<li><a href="./">About Us</li>
<li class="dir"><a href="./">Activities</a>
<ul>
<li><a href="./">Purchase</a></li>
<li><a href="./">About Us</a></li>
<li><a href="./">Gallery</a></li>
<li><a href="./">Contact</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir"><a href="./">Store</a>
<ul>
<li class="dir"><a href="./">New</a></li>
<li class="dir"><a href="./">Used</a></li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
</ul></li>
<li>Gallery</li>
<li><a href="./">Contact Us</a></li>
</ul>
</div>
<h1>why choose us?</h1>
<div id="front_photo"> <img src="images/wall.jpg" alt="css image" /> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum. <a href="#">More...</a></p>
<!--services start -->
<div id="concept">
<h2>new services R Richardson</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et arcu lectus. Praesent at ipsum ante, in egestas justo. Sed non massa quis leo imperdiet laoreet sed vitae nunc. Ut malesuada ipsum a velit ullamcorper eget tristique lorem euismod. Pellentesque purus lacus, lacinia et tristique et, rhoncus et elit. Aenean vulputate, lorem id sollicitudin posuere, neque arcu pharetra risus, vitae iaculis mauris tellus vitae leo. Sed est lorem, viverra vitae congue non, ornare quis orci. Cras egestas ultrices dui non imperdiet. Vivamus sed auctor nisl. Phasellus in tortor ac eros convallis dictum. </p>
<!--services end -->
<br class="blank" />
</div>
</div>
<div id="main_footer">
<div id="footer"><!--footer navigation start -->
<ul>
<li><a href="#" class="mg">Home</a>|</li>
<li><a href="#">About Us</a>|</li>
<li><a href="#"> Activities</a>|</li>
<li><a href="#">Store</a>|</li>
<li><a href="#">Gallery</a>|</li>
<li><a href="#">Contact Us</a></li>
</ul>
<p>© Kling:2. All rights reserved. 2009.</p>
</div><!--footer navigation end -->
</div>
</div>
</body>
</html>
The problem is at - http://dynamixco.com/ You see I have floated frame1 and frame2 is horizontal to it... in firefox frame2 is a little below frame1 causeing it too look bad anyone know the solution? (both html and the css are validated) EDIT: now that I think of it, Im sorry if this is in the wrong section O.O EDIT: Resolved, the solution was floating one frame left and the other right. hello fellows, I am new here and dont have much experience but trying to learn html and css. English is not my first language so please ignore my grammar mistakes. I am trying to line up divs in a row but seems I am failed to do it. I can do it by using tables but just wonder if it could be done without inserting tables. Here is my test page which I want to fix. Here is other test page contains tables. Any help would be much appreciated. Hi I have a requirement. i have an image with float:left style. I have a text following that and an line just below the text spanning entire width of column(not just width of text). I tried 2 ways of displaying it, but the underline was displaying below the floated image not just below the text. Can you please help me here? Two ways 1) Image: float:left, Text and <HR> 2)Image:float:left, Text and dot image spanning entire width of column and height 1 pixel Thanks rakesh Is there any site from where i can download the web development books? Hello, I am Delphi programmer and PHP web development, I have a problem with the AJAX which is: how to free or close the element, in the Delphi when I create an object in runtime it can be free the object and close it like query, anyway how to close or free the result in AJAX language? below is an exmple: Code: var Buffer= document.body;
var getDivBox= document.getElementById("div_box");
var EDivBox= document.createElement("div");
if (getDivBox != null)
{
getDivBox.style.visibility = "visible";
}
else
{
EDivBox.setAttribute("id","div_box");
Buffer.appendChild(EDivBox);
}
with the above code, for first loading it will create to element and while you are in the page it will still create my question is how to close the created element in order to make the page fast because in the localhost I checked the CPU performance and I surprised: it was 100%, when I close the page it go back normal. any help with this topic is highly appreciated Regards Hi everyone. I need to find some software that is like Adobe Contribute, but free. I am designing a web site for a friend and he wants to be able to edit it himself but cannot pay the price for Adobe Contribute. Does anybody know of any free software that I can download that works like Contribute? Thank you. Lee i want to build a free website to start really learning html until i am a wizard at html hi, i am currently trying to learn HTML and wanted a free live website to practice on, however when i signed up for one at tripod.com, i had to use some setup guide thing, even when i clicked "start a blank website". most other free website services seem to have something similar. Is there a way around this, so i can start from scratch and build the website purely with html/xhtml etc. or a different histing service that lets you do this? any information would be appreciated, thank you Hi guys, Does anyone have any links to where I can upload (give) a free template. I Googled it but quite surprised to find a lack of "submit a template" links! http://www.prodevs.org Hiya, I'm developing a free website for someone. Wondered if anyone knew of any good sites that offer free templates that aren't too bland. Cheers, James Hi, I have been having major problems with Frontpage and am ready to download a diffrent free website builder, whats the best one? and how would i upload my current pages to my new builder? Hi All, Just find a new website for free software download i was very much impressed with the products they have. I thought it might be useful for others also. Please post if anybody find any other related websites having many softwares like this. Thank you. hello. i am having difficulty figuring out how to make iframes out of this free template: http://www.freewebsitetemplates.com/preview/template24/ download: http://www.freewebsitetemplates.com/...ate=template24 i would like the banner and buttons as the TOP and the rest of the stuff as the bottom on the iframed website. i was thinking i'd do this Code: <html>
<head>
<title>iFRAMES</title>
</head>
<frameset rows="150,*">
<frame src="96_top.html" frameborder=0 scrolling="no" NAME="top">
<frameset cols="220,*">
<frame src="main.html" frameborder=0 NAME="bottom">
</frameset>
<noframes>
<body>
<a href="your main page.html">Click Here</a>
</body>
</noframes>
</frameset>
</html>
however then I wouldn't get the white side bars. does anyone have any good ideas on how to turn this template into a framed site? thanks, g New Free Domain Provider at spam. Support DNS setup and URL forwarding! Apply: [link removed] Is there a good, free .psd file editor? Hi All, first post in the forum. I would like to know if it is possible to create a drop down list from which the user could select a value but could also decide to enter a new one ? What I want is to offer the user to select an existing company name or enter a new one, but I would like to have only one field to do it instead of two. Is this possible Thanks for helping. ALex |
|||||||