SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV Layout - Mozilla Firefox

    Hi guys,

    I'm kind of new when it comes to working with CSS, but I am supposed to deliver a site project for school and I'm having a bit of an issue when it comes to the layout of the divs.
    I have a maindiv which is supposed to contain 3 divs aligned side by side, menu on left, some writing in the middle, and photos on the right div.
    However, my right seems to be aligning pretty weird, here's a printscreen ( http://postimage.org/image/b1byg2vpz/ ) I have tried over and over again to fix the issue, but haven't succeeded so far.

    Here's the CSS code:
    Code:
    #maindiv{z-index:1; position:absolute; top:-20; left: 20%; ; right: 20%; width:60%; height:100%; background-image: url('images/divback.jpg');  }
    			
    #header { margin: 0px auto; text-align:center; clear: both; padding: 0; position:absolute; left:0px; top:15px; margin-left:5%;}
    			
    #writing {padding: 15px;  border-left: 2px solid #4f4341; border-right: 2px solid #4f4341; top: 400px; width:28%; float:left; clear:both; }
    			
    #photos {padding: 15px;  float: right; top:0px; width: 10%;  float:left; clear: both; }
    
    .bmenu li a{
    	 display: block;
        color: transparent;
        text-transform: uppercase;
        text-shadow: 0px 0px 0.2px #251c1d;
    	list-style: none;
        letter-spacing: 1px;
    	list-style-type: none;
    	position: relative;
    	top:320px;
    	width: 18%;
    	padding: 5px 18px;
    	margin: 2px;
    	background: rgba(255,255,255,0.2);
    	letter-spacing: 1px;
    	text-decoration: none;
    	clear: both;
    	float: left;
    	 -webkit-transform: skew(-12deg);
        -moz-transform: skew(-12deg);
        -o-transform: skew(-12deg);
        -ms-transform: skew(-12deg);
        transform: skew(-12deg);
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .bmenu:hover li a{
        text-shadow: 0px 0px 6px #251c1d;
    	 list-style-type: none;
    	 list-style: none;
    	 -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -o-transform: skew(0deg);
        -ms-transform: skew(0deg);
        transform: skew(0deg);
    }
    .bmenu li a:hover{
        color: #fff;
    	background: transparent;
        text-shadow: 0px 0px 1px #251c1d;
        padding-left: 10px;
    	 list-style-type: none;
    	 list-style: none;
    }
    And the HTML:

    Code:
    <div id="maindiv">			
    	<div class="bmenu">
    	  the menu
    	</div>
               <div id="writing" style="height:140%"> some writing </div>
               <div id="photos" style="height:140%"> photos </div>
    </div>
    I don't know what I'm doing wrong in the CSS part, could someone please lend me a hand?

  2. #2
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks like some floats needs to be cleared. Can you please provide a link to the working copy. That would be easy to debug.
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  3. #3
    SitePoint Member
    Join Date
    May 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you need a link to the website, I can't provide that since I haven't uploaded anything. But I can upload a .rar archive with the css codes and this particular page.

  4. #4
    SitePoint Zealot radiant_luv's Avatar
    Join Date
    Apr 2009
    Location
    WebVille
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post the code. HTML + CSS
    Personal Playground: www.sudipmondal.com
    Twitter: @iam_sudip

  5. #5
    SitePoint Member
    Join Date
    May 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't I do that in my first post? I'm so sorry, I don't mean to waste anyone's time, I'm just confused.

    Anyway, just in case, I'm posting them again. I have 2 css stylesheets, one for the menu, one for the rest, and the html. I hope this is what you need.

    Code:
    			
    			#maindiv{z-index:1; position:absolute; top:-20; left: 20%; ; right: 20%; width:60%; height:150%; background-image: url('images/divback.jpg');  }
    
    			#footer{  display: inline-block; clear: both; height: 5%; border-top: 1px solid white; padding: 0; margin: 0; background-color: black; }
    			
    			#header { margin: 0px auto; text-align:center; clear: both; padding: 0; position:absolute; left:0px; top:15px; margin-left:5%;}
    			
    			#afterheader {position: relative; height:4.3%; width: 100%; top: 300; border-top: 2px solid #4f4341; border-bottom: 2px solid #4f4341;background-image: url('wall1.jpg');}
    			
    			#writing {padding: 15px;  border-left: 2px solid #4f4341; border-right: 2px solid #4f4341; top: 400px; width:28%; float:left; clear:both; }
    			
    			#photos {padding: 15px;  float: right; top:0px; width: 10%; clear: both; }
    Code:
    .bmenu li a{
    	 display: block;
        color: transparent;
        text-transform: uppercase;
        text-shadow: 0px 0px 0.2px #251c1d;
    	list-style: none;
        letter-spacing: 1px;
    	list-style-type: none;
    	position: relative;
    	top:320px;
    	width: 18%;
    	padding: 5px 18px;
    	margin: 2px;
    	background: rgba(255,255,255,0.2);
    	letter-spacing: 1px;
    	text-decoration: none;
    	clear: both;
    	float: left;
    	 -webkit-transform: skew(-12deg);
        -moz-transform: skew(-12deg);
        -o-transform: skew(-12deg);
        -ms-transform: skew(-12deg);
        transform: skew(-12deg);
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .bmenu:hover li a{
        text-shadow: 0px 0px 6px #251c1d;
    	 list-style-type: none;
    	 list-style: none;
    	 -webkit-transform: skew(0deg);
        -moz-transform: skew(0deg);
        -o-transform: skew(0deg);
        -ms-transform: skew(0deg);
        transform: skew(0deg);
    }
    .bmenu li a:hover{
        color: #fff;
    	background: transparent;
        text-shadow: 0px 0px 1px #251c1d;
        padding-left: 10px;
    	 list-style-type: none;
    	 list-style: none;
    }
    Code:
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    		<link rel="stylesheet" href="menu4.css" type="text/css" />
    		<link rel="stylesheet" href="background.css" type="text/css" />
    		<link rel="stylesheet" href="header.css" type="text/css" />
    		<title>China</title>		
    	</head>
               <body>
    	<div style="position:fixed; z-index:0; top:0; left:0; width:100%; height:100%;" >
    		<img src="wall1.jpg" width="100%" height="100%">
    	</div>
    	<div class="outer">
    		<div id="content"></div>
    		<div id="before"></div>
    		<div id="maindiv">
    			<div id="header" align="center" class="move">
    				<img src="images/header2.jpg" width="700px" height="210px" style="border:6px double #545565;"></img>
    			</div>
    			<div class="bmenu">
    			<ul style="list-style-type: none;">
    				here goes the menu
    			</ul>
    			</div>
    			
    			<div id="writing" style="height:140%"> <font face="calibri" color="#cfd9db" size="3"> the writing </div>
    			<div id="photos" style="height:140%"> <font face="calibri" color="#cfd9db" size="3"> photos+writing </font></div>
    		</div>
    	</div>
    	</body>
    </html>

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're trying to float them side by side, yes? WHy does the #photos, then, have clear:both on it? It'll force it to slide under the float.

    It's still very hard to see what you meant. We don't have images (and that's mainly what your page is). A live link would be best, in the future .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Member
    Join Date
    May 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I was trying to float them side by side, but the #photos one will just begin from the middle of the other divs no matter what I do [deleting the clear: both didn't help]. I don't know how to put it, it doesn't go right underneath the other two dives, it's just not perfectly aligning with them. I really don't know to explain it, I'm not even sure what words to use to describe this since English isn't my native language and I'm also a newbie in terms of CSS.
    Anyway, my project is due for tomorrow, so I just decided to use only 2 divs, the menu and the writing one, and inside the writing one I used tables when needed.
    It would be nice to know what's wrong with my original code though, I'm sure it could help me in the future.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by andreeaf View Post
    Yes, I was trying to float them side by side, but the #photos one will just begin from the middle of the other divs no matter what I do [deleting the clear: both didn't help]. I don't know how to put it, it doesn't go right underneath the other two dives, it's just not perfectly aligning with them. I really don't know to explain it, I'm not even sure what words to use to describe this since English isn't my native language and I'm also a newbie in terms of CSS.
    Anyway, my project is due for tomorrow, so I just decided to use only 2 divs, the menu and the writing one, and inside the writing one I used tables when needed.
    It would be nice to know what's wrong with my original code though, I'm sure it could help me in the future.
    Yes, just from that description, I have no clue what you want.

    Good luck with your project grade.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •