|
HTML - Div Stacking
pretty basic question, never had trouble with this before.. but on my page
http://nativboardriding.com/company.htm i would like the 3 div sections, ABOUT, CONTACT, and INTERNATIONAL DISTRIBUTORS to be stacked horizontally. they are all divs with width 200px styled to float left, and the sum of their widths is 600px (3 x 200px) which is well below the width of the div they are nested in (800px).. however the last 2 divs still drop down to the next line.. WHY!?? thanks in advance for the help Similar TutorialsHi everyone, I'm building a webpage with the center portion as the content area. I have a background image for the entire page, then another background image for the content area, then more image links stacked on top of the content area. What I want to do is for the content area to fade in/out to different pages depending on which image link I click. What I did is have all the "pages" in one html file, separated by div containers. Clicking a link will navigate to that div container. Since each "page" is essentially just a background image with some content on it, I tried to stack all of them into the exact same spot, but I'm having trouble with this as all the pages currently are lined up vertically, going below my screen hidden from view. Here's an illustration of what it looks like: I got everything working now except for two annoying problems: - The fade out animation does not play when navigating to any page except the home page (navigating to home page the animation will play) - When I go to any page except home page, all the images will appear lined up vertically, causing the scroll bar at the side to appear briefly before disappearing, since having each page stacked and all visible will go beyond bottom of my screen, which is very unappealing Here is my code so far: I've simplified it to two content pages so it's easier to read. HTML: Code: <meta charset="utf-8">
<title>The Elements of Go</title>
<!--jQuery library-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<!--CSS for html-->
<link href="css/ElementsOfGo.css" rel="stylesheet" type="text/css">
<!--<link href="css/ElementsOfGoFonts.css" rel="stylesheet" type="text/css">-->
<!--FADE-->
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() { showWindow("mainpage") }, 2000);
$('.aboutbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("aboutpage"), 2000);
} );
$('.mainbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("mainpage"), 2000);
} );
function hideAllWindows() {
$('#mainpage').fadeOut();
$('#aboutpage').fadeOut();
$('#historypage').fadeOut();
$('#referencespage').fadeOut();
$('#strategiespage').fadeOut();
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
</script>
</head>
<body>
<div id="backgroundcontainer">
<div id="mainpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head to about page-->
<a class="transition aboutbutton"><img src="some image">
</a>
</div>
<div id="aboutpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head back to main page-->
<a class="transition mainbutton"><img src="some image">
</a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
/*The webpage background image*/
body {
background-image:url(../pictures/menubackgroundbubbles.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
}
#backgroundcontainer {
display:block;
margin-left:auto;
margin-right:auto;
}
/*background image for the content pages*/
#mainpage,#aboutpage {
background-image:url(../pictures/background.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
overflow:hidden;
display: none;
margin-left: auto;
margin-right: auto;
position: relative;
width:800px;
height:570px;
}
#mainpage img,#aboutpage img {
position: absolute;
border:none;
width: 119px;
height: 119px;
}
Thanks for any help! Hi Guys: I am editing a html page for my boss but am having problems with the images stacking instead of being properly aligned. I can't figure it out for the life of me: http://www.nyu.edu/fas/dept/chemistr.../testpage.html Can anyone provide any advice on how to fix this? I am editing this page with Adobe Golive. Thanks! Hi there. I'm just starting off in web design, and I am learning as I go along. I have been working on my site all day using Dreamweaver, but there is still one thing I am trying to do without success. Basically I have one Large image on a page, and I want to stack four smaller images vertically next to it on the right hand side. (shown in the attached image) I tried using a table, but all the boxes had the same dimensions. If I use margin to align the pictures, I cannot move the third picture underneath the small one. I realize I am going about this all wrong, but I have no clue as to how to achieve what I am trying to do. All I seem to find on the net is how to wrap text around an image. For example, here's what I did: Quote: <img src="images/Main Window Gallery1.png" width="517" height="395" border="0"><img src="images/small window1 gallery1.png" style="margin: 0px 0px 303px 25px;” width="132" height="92" border="0"><img src="images/small window1 gallery1.png"" height="92" border="0" align="absmiddle" style="margin: 0px 0px 180px 0px;” width=" valign="center"132> Any help is appreciated. Thank you. |
|||||||