|
CSS - Floating Element When Minimized =[
I'm having an issue where the floating element, in this case the Jump box and the sponsor image, aren't hidden when you minimize the browser. They overlap the banner when I just want them to be hidden.
Sample Images: Maxed Minimized Thanks, Ryan Similar TutorialsHello, My site is on Wordpress and I have changed some CSS. Now my site gets screwed up when I change something in the sidebar. For example if I add something bigger than sidebar width the text on the right drops all the way down in IE. However in firefox everything seem to be fine. But still in IE when I minimize the window the text jumps down. Also when I checked my site on doomaintools.com it showed a small picture of my site but the page is screwed up. I think it is CSS problem. I want to make the sidebar and right side to a particular width so it doesn't change. How can it be done? site is sushicup.com If you are good with css please help me! I'm so lost. Thank you. rush4rk I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it. Code: /*---------------------------------------------
Footer Area Starts here
----------------------------------------------*/
#FooterBody{
background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
height:232px;
width:100%;
border:1px solid;
color:#f2f1df;
}
#FooterContainer{
width: 936px; margin: 0 auto; padding: 0; text-align: left;
}
/*------------------------------------------------footer--------------------*/
#footer{
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
float: left;
height: 232px;
background-image: url(http://www.cleverchickcreations.com/images/footer.png);
background-repeat: repeat-x;
position: relative;
}
#btmmenu_area{
width:1100px;
height:120px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.navcolumn {
float: left;
width: 300px;
height: 120px;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
}
.row1 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 140px;
text-align: left;
margin-top: 10px;
padding-left: 10px;
line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row1 a:hover{
color: #6d5f52;
text-decoration: none;
}
.row2 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row2 a:hover {
color: #6d5f52;
text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row3 a:hover {
color: #6d5f52;
text-decoration: none;
}
.foot-headers {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ef5f9b;
line-height: 140%;
}
.footer_links {
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #333333;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.footer_copyrights {
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #c2c093;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/*------------------------------------------------validation --------------------*/
#validation_area {
width:100px;
height:34px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.validation {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
.validation:hover {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance I have recently created a design in which the main content and sidebar are both floated right, but I've been having a problem. For whatever reason, the main content has been floating slightly below my sidebar. Could anyone please look at the code and tell me how to fix it? Thanks a ton, go here to view my problematic design. I've had to write the address differently because "new user accounts are not permitted to create posts containing URLs." wendyhenrichs (dot) com (slash) pin. If you had trouble understanding my above message, here's the address with spaces in them (just remove the spaces in your address bar): http:// www . wendyhenrichs . com / pin Please just take a quick look. Thanks! Hi again could someone help me figure out why my left and right box's on thid design are not inline with the content (middle) box thanks see attached pic to see what i mean. Code:
CSS CODE
body {
background:#ffffff;
color:#000000;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}
/*** Main container ***/
#container {
background:#EAEAEA url() repeat-x;
color:#000000;
width:90%;
margin:5px;
min-width:770px;
padding:0;
}
/*** Content ***/
#content {
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
height:500px;
margin:5px;
}
/*** Main Banner ***/
#Banner {
background-color:#EEEEEE;
height:55px;
border:1px solid #DEDEDE;
padding:15px 20px 5px;
margin:5px;
}
/*** Left Side Navigation ***/
#SideNav {
width:15%;
float:left;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
min-width:200px;
padding:15px 20px 5px;
margin:3px;
}
/*** Right Side content ***/
#RightCon {
float:right;
width:15%;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
min-width:200px;
margin:3px;
}
Thanks I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. http://tonglebeak.com View it in FF, and the floating boxes correctly appear on top of the white div underneath of it. View it in IE, and the floating boxes push the white div below them. How can I get IE to render this the same as FF? Hi, I'm getting very frustrated trying to float in image to the right and vertically aligned in a TD cell. This is a actually a vBulletin Forum Home Page and I want to display an image in the forum description. With the inline CSS below I keep getting a new line which I don't want. I want the text "Forum description goes here" with the image vertically aligned on the right hand side of the TD cell. Code: <td class="alt1Active" align="left" id="f34"> <div> <a href="http://www.myurl.co.uk/forums/test_forum/"><strong>Test Forum</strong></a> </div> <div class="smallfont"> Forum description goes here. <!-- *** THIS IS THE BIT I HAVE CONTROL OVER *** --> <div align="right" valign="top" style="float:right;"> <a href="http://www.myurl.co.uk"> <img src="http://www.myurl.co.uk/picture.jpg" style="border:0px;"> </a> </div> <!-- ****** --> </div> </td> Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png http://jordanmeeter.com/new/links.php If you view that page in Firefox, it displays how it is supposed to. But if you view the page in Internet Explorer, you can see that it is severely ****ed up! Any suggestions? Thanks, Jordan I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox. I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause. I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it. 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=utf-8" />
<title>test</title>
</head>
<body>
<!-- A big box to hold everything -->
<div style="border-style: solid;
border-color: #777777;
margin-top: 10px;
margin-bottom: 10px;
width: 400px;
padding: 0;">
<!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box -->
<div style="float: left;
width: 106px;
height: 106px;">
<img src="test.jpg" alt="Picture of Test Image"
style="display: block;
width: 100px;
height: 100px;
border-style: solid;
border-color: black;
border-width: 3px;
margin: 0;" />
</div>
<!-- This is the text Div that holds an H3 heading
Keep a 106px margin to prevent any later text from wrapping.
Neither Removing the margin nor the padding HERE solves the problem
only the margin-bottom in the h3 tag style seems to matter -->
<div style="margin-left: 106px;
padding-left: 10px;
margin-right: 0;
margin-bottom: 0;
margin-top:0;">
<h3 style="margin-top:5px;
margin-bottom: 5px;
border-style: solid;
margin-left: 0;
margin-right: 0;">Test</h3>
<!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;"
leave a gap 5px gap underneath the image in IE7 but not firefox.
Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly?
The H3 should be WELL away from the bottom of the div with most font
sizes...Also oddly enough, enclosing the parent div of the h3 in a border
removes the gap under the image BUT a border around the h3 itself does NOT
Why the gap? -->
</div>
<!-- This div stops the floating -->
<div style="clear:both;
margin: 0;
margin-right: 0;
padding: 0;
width: 0;
height: 0;">
</div>
</div>
</body>
</html>
Hallo, I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/ but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute. Does some know a good source where I find more information or documented examples ? Finally I can fix my problems, but it take so much time of testing... Thnaks |
|||||||