I have just started putting my site together. I have a scrolling banner DIV and now i want to add a an image underneath 'largemenubutton' DIV but when I place it just sits on top of my banner? I have put in the CSS to clear:left however this does not work.
html
<body>
<div class="mainhome">
<div class="header">
<div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
<div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
<div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
<div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
<div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div>
<div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
<div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
<div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
<div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
</div>
<div class="mainimage">
<div id="slider_container">
<div id="slides">
<img src="images/slider/emmasteed.png" alt="Emma Steed Graphic Art and Web Design" />
<img src="images/slider/graphicdesign-desk.png" alt="Emma Steed Graphic Art and Web Design" />
</div>
</div>
<div class="bluebar"></div></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
</div>
css
#charset "UTF-8";
/* CSS Document */
body {
background-image:url(images/header-background.png);
background-repeat:repeat-x;
margin:0;
}
.mainhome {
width: 855px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 236px;
background-image:url(images/header-background.png);
background-repeat:repeat-x;
clear:left;
}
.mainimage {
width: 855px;
height: 423px;
background-color:#0C9;
position:absolute;
top:220px;
clear:left;
float:left;
z-index:-1;
}
#slider_container {
width:855px;
height:423px;
overflow:hidden;
}
.bluebar {
width: 855px;
height: 16px;
background-color:#334d5c;
clear:left;
float:left;
}
.menubutton-leftside {
width:60px;
height:20px;
float:left;
margin-top:95px;
}
.menubutton-rightside {
width:60px;
height:20px;
float:left;
margin-top:95px;
text-align:right;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
color:#666;
display:inline;
}
.logo {
width:170px;
height:170px;
float:left;
margin-top:30px;
}
.largemenubutton {
width:261px;
height:259px;
float:left;
clear:left;
}
JSFIDDLE here
http://jsfiddle.net/cX8Z9/
The problem is that there is an extra </div> after the bluebar, so the largemenubutton is not inside the same container mainimage, which is positioned absolutely (so the largemenubutton is just sitting where it would sit if the mainimage hadn't been there at all).
<div class="bluebar"></div></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
And you can't "clear" an absolute positioning the way you can a float.
So the solution is to move the offending </div> two lines down, thus putting the largemenubutton inside the mainmenu.
<div class="bluebar"></div>
<div class="largemenubutton"><img src="images/portfolio.png" /></div>
</div>
See jsFiddle.
Related
I'm creating a website, but have a little problem, that I don't know how to solve.
<div id="middle">
<div id="clock">Here shows JS clock</div><br>
<div class="element">
<img height="80px" src="SOURCE"/><h1 style="float:left" >TITLE TEXT</h1><div class="clearboth"></div>
TITLE TEXT
</div>
<div class="clearboth"></div>
<div class="element">
<img height="80px" src="SOURCE"/><h1 style="float:left">TITLE TEXT</h1><div class="clearboth"></div>
<p>SOME TEXT</p>
</div>
And CSS
.element{
background-color:#fff;
min-heigth:100px;
}
#middle{
font-family:'Roboto', monospace;
padding-left:5px;
padding-right:5px;
min-height:1000px;
width:1000px;
background-color:#ffffff;
margin:auto;
}
#middle > h1,h2,h3{
font-family: 'VT323', monospace;
font-size:34px;
margin-left:20px;
}
.clearboth{
clear:both;
}
#middle p{
text-indent: 40px;
font-size:18px;
}
But it min-height doesn't work - next element starts right after previous one.
From what I can tell, it doesn't seem like the height of the items is changing (i.e. with percentages, etc). This means that the height remains static, so there is no reason for the min-height to activate, in a sense. Try doing that and fixing the other errors that the others have pointed out. Hope this helps.
It seems to me that what you want is to have space between your elements, assuming that the code you write is corrected ("height" instead of "heigth" and the div#middle is closed), try adding to your element some margin at bottom.
.element {
background-color: #fff;
min-height: 100px;
margin-bottom: 30px; /* Add this line to separate each element for 30px */
}
If you don't need the margin on the last element just add a new selector to target the last .element in your code.
.element:last-of-type {
margin-botton: 0;
}
Try this, min-height spelled wrong and your #middle div isn't closed.
.element{
background-color:#fff;
min-height:100px;
}
#middle{
font-family:'Roboto', monospace;
padding-left:5px;
padding-right:5px;
min-height:1000px;
width:1000px;
background-color:#ffffff;
margin:auto;
}
#middle > h1,h2,h3{
font-family: 'VT323', monospace;
font-size:34px;
margin-left:20px;
}
.clearboth{
clear:both;
}
#middle p{
text-indent: 40px;
font-size:18px;
}
<div id="middle">
<div id="clock">Here shows JS clock</div><br>
<div class="element">
<img height="80px" src="SOURCE"/><h1 style="float:left" >TITLE TEXT</h1><div class="clearboth"></div>
TITLE TEXT
</div>
<div class="clearboth"></div>
<div class="element">
<img height="80px" src="SOURCE"/><h1 style="float:left">TITLE TEXT</h1><div class="clearboth"></div>
<p>SOME TEXT</p>
</div>
</div>
This is my first time trying an overlay. It is somewhat working however, hovering the first image would overlay below.. I tried making the position absolute, but that means that overlay would stay at top.
<div class="galleryContainer">
<div class="row">
<div class="galleryItem">
<img src="http://upload.wikimedia.org/wikipedia/commons/d/da/Gold-jewellery-jewel-henry-designs-terabass.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://3.bp.blogspot.com/_HEjoNp_qRz8/TSsQZNyVFUI/AAAAAAAAJhI/xc7MCnnNYZY/s1600/World%2527s+Most+Funniest+Animals+Photos+%25288%2529.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
</div>
<div class="row">
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-19.jpg"/>
<div class="imgCaption">
<p>lulz</p>
</div>
</div>
<div class="galleryItem">
<img src="http://funny-pics-fun.com/wp-content/uploads/Very-Funny-And-Creative-Ads-Using-Animals-18.jpg"/>
<div class="imgCaption">
<p>yaw</p>
</div>
</div>
</div>
</div>
css:
.row {
margin:2%;
}
.row .galleryItem {
float: left;
padding-right: 5%;
width:300px;
height:350px;
}
.row .galleryItem img {
width:280px;
height:330px;
padding:0;
margin:0;
}
.row .galleryItem .imgCaption {
top: 0px;
width:300px;
height:350px;
background:#FF2400;
opacity:0;
}
.row .galleryItem .imgCaption p {
color:white;
font-weight: 400;
font-size:16px;
text-align: center;
}
.row .galleryItem:hover .imgCaption {
opacity: 0.7;
}
.galleryContainer {
margin: auto;
max-width: 900px;
}
Here is a jsfiddle I made that demonstrates the issue. Any help would be appreciated.
Your problem is that your caption is positioned wrongly. It can be finished by adding float:left; to your img.
Here's a fiddle.
EDIT:
Other changes:
The caption div didn't fade properly so I switched the show up method from, opacity:0 -> opacity: 0.7;, to display:none -> display: block.
I removed the margins and paddings from the <p> element since it appeared displaced.
I have a footer div that is just a solid colour that I would like to sit at the bottom outside of my container DIV which is called 'mainhome'. I would like it to stretch the entire site. It just keeps sitting on top of my banner - I'm getting lost in the code now so maybe i have just missed something small?
Thank you in advance
MY HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mainhome">
<div class="header">
<div class="menubutton-leftside" style="margin-right:23px"><h2>home</h2></div>
<div class="menubutton-leftside" style="margin-right:20px"><h2>about</h2></div>
<div class="menubutton-leftside" style="margin-right:30px"><h2>portfolio</h2></div>
<div class="menubutton-leftside" style="margin-right:27px"><h2>contact</h2></div>
<div class="logo"><img src="images/es-logo.png" width="170" height="170" /></div>
<div class="menubutton-rightside" style="margin-left:17px"><h2>print</h2></div>
<div class="menubutton-rightside" style="margin-left:25px"><h2>digital</h2></div>
<div class="menubutton-rightside" style="margin-left:38px"><h2>illustration</h2></div>
<div class="menubutton-rightside" style="margin-left:20px"><h2>brand</h2></div>
</div>
<div class="mainimage">
<div id="slider_container">
<div id="slides">
<img src="images/slider/emmasteed.png" alt="Emma Steed Graphic Art and Web Design" />
<img src="images/slider/graphicdesign-desk.png" alt="Emma Steed Graphic Art and Web Design" />
</div>
</div>
<div class="bluebar"></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/portfolio.png" /></div>
<div class="largemenubutton" style="margin-right:36px"><img src="images/getintouch.png" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" /></div>
</div></div>
<div class="footer"></div>
</body>
</html>
MY CSS
#charset "UTF-8";
/* CSS Document */
body {
background-image:url(images/header-background.png);
background-repeat:repeat-x;
margin:0;
padding:0;
}
.mainhome {
width: 855px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header {
height: 236px;
background-image:url(images/header-background.png);
background-repeat:repeat-x;
clear:left;
}
.mainimage {
width: 855px;
height: 423px;
background-color:#0C9;
position:absolute;
top:220px;
float:left;
z-index:-1;
}
#slider_container {
width:855px;
height:423px;
overflow:hidden;
}
.bluebar {
width: 855px;
height: 16px;
background-color:#334d5c;
clear:left;
float:left;
}
.menubutton-leftside {
width:60px;
height:20px;
float:left;
margin-top:95px;
}
.menubutton-rightside {
width:60px;
height:20px;
float:left;
margin-top:95px;
text-align:right;
}
h2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:normal;
color:#666;
display:inline;
}
.logo {
width:170px;
height:170px;
float:left;
margin-top:30px;
}
.largemenubutton {
width:261px;
height:259px;
float:left;
margin-top:20px;
}
.footer {
width:100%;
height: 61px;
background-color:#334d5c;
clear:left;
}
It doesn't look like .nameimage needs to be absolutely positioned, but it depends on what you want it to do. Rough example: http://codepen.io/anon/pen/oAbJy.
likely the easiest thing to do, if you ALWAYS want that to be at the very bottom is just give it a fixed position. Add the following to your CSS for the footer. (you may also have to set height and width on the body to 100%)
position: Absolute;
bottom: 0px;
Ok , so below is my CSS AND HTML code. I have been using percentage for the divs so that those divs can re-adjust to bigger screen sizes . The annoying thing is that when I resize the window to a smaller size on my computer , those elements keep moving till they overlap and I don't want that . How can I use percentages to make those divs re-adjust to bigger resolutions , yet not move when resizing the window to a smaller size based on the CSS and HTML I have below
Here is the CSS
body{
background:#F4F4F4;
background-size:100%;
width:100%;
height:100%;
margin:0 auto;
min-width:1300px;
min-height:750px;
}
.logo{
position:absolute;
left:40%;
top:5%;
}
.logo_homepage{
position:absolute;
left:4%;
top:5%;
}
.homepage_slogan{
position:absolute;
left:3%;
top:45%;
}
.search_box{
position:absolute;
left:30%;
top:30%;
width:35%;
height:50%;
min-width:35%;
min-height:50%;
}
.user_info{
position:absolute;
left:75%;
height:100%;
width:20%;
min-width:20%;
background:white;
}
.header{
position:absolute;
top:0px;
width:100%;
min-width:98%;
height:100px;
min-height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:absolute;
top:60%;
left:40.5%;
}
.login{
position:absolute;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
#slides{
position:absolute;
top:20%;
width:50%;
background:transparent;
height:20%;
left:25%;
}
.socialfeeds{
position:absolute;
top:41%;
width:25%;
height:52%;
min-width:25%;
min-height:52%;
left:25%;
}
.heading{
position:absolute;
top:20%;
width:100%;
min-width:100%;
height:10%;
min-height:10%;
left:2%;
}
.bucket{
position:absolute;
top:18%;
left:20%;
width:13%;
min-width:13%;
}
.title{
position:absolute;
top:20%;
left:32%;
width:30%;
min-width:30%;
}
.feed_icons{
margin:20px;
}
.featured{
position:absolute;
top:30%;
width:30%;
min-width:30%;
background:transparent;
height:60%;
min-height:60%;
left:60%;
}
and the HTML
<body class="whitebackground">
<div class="header">
<div class="logo"><img draggable="false" src="/images/logo.png" /></div>
<div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
<div class="login"><img draggable="false" src="/images/login.png" /></div>
</div>
<div class="bucket">
<span class="feed_icons"><img draggable="false" src="/images/bucket.png"/></span>
</div>
<div class="title">
<span class="feed_icons"><img draggable="false" src="/images/title.png"/></span>
</div>
<div class="socialfeeds">
<span class="feed_icons"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></span>
</div>
<div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
<div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013©</span></div>
</body>
Position: absolute pulls the elements out of the DOM rendering rules. The CSS as written tells the browser to always place these elements at X position no matter what size of the element or screen. A List Apart has an excellent article for getting a good grounding in how positining works: http://alistapart.com/article/css-positioning-101
Remove the positioning and instead use either the "display:" or "float:" properties. Things will begin to flow according to the DOM rendering rules.
In addition, make sure applied CSS classes have functional or semantic naming. Avoid using classes that make reference to design treatment since things like colors/big/small can and do change over time., ie, "whitebackground". The code is much better served using something like the "client-name" or .theme and then declaring the background color for that class or on the BODY tag.
HTML Mark-up
<body class="site-body">
<div class="header">
<div class="logo"><img draggable="false" src="/images/logo.png" /></div>
<div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
<div class="login"><img draggable="false" src="/images/login.png" /></div>
</div>
<div class="bucket">
<span class="feed_icons"><img draggable="false" src="/images/bucket.png"/></span>
</div>
<div class="title">
<span class="feed_icons"><img draggable="false" src="/images/title.png"/></span>
</div>
<div class="socialfeeds">
<span class="feed_icons"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></span>
</div>
<div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
<div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013©</span></div>
</body>
CSS:
.header {
height: auto;
overflow: hidden; /* clears floated child elements */
width: 100%;
min-width: 98%;
}
.logo, .slogan, .login {
display: inline-block;
}
/* or...
.logo, .slogan, .login {
float: left;
} */
.slogan {
margin-left: 40.5%;
}
It's better to use media-queries here.
#media all and (max-width: 60%) and (min-width: 30%) {
..........whatever you want to do...................
}
for more info on media-queries visit: css-media-queries
Making a single page website. The HTML is as follows
<!-- Landing Page-->
<div id="landing">
<img src="front.png" alt="Cover Page">
</div>
<!-- About -->
<div id="page1">
<a id="about"></a>
<img src="Who.png" alt="About Me">
<p>
xxx
</p>
</div>
<!-- Work -->
<div id="page2">
<a id="portfolio"></a>
<div id="container">
<a class="fancybox" href="portfolio1.jpg" title="'Consumed' </br>Digital/Print Work"><img src="portfolio1s.png"/></a>
</div>
</div>
<!-- Contact -->
<div id="page3">
<a id="contact"></a>
<img src="Contact.png" alt="Contact Information">
<p>
xxx
</p>
</div>
</body>
I removed the image links from the div #container, but altogether there are more than 10. My issue is when I make the window narrow (to see how it will be viewed on a mobile device), the images in div #container overlap with my image on my contact page. I would like it such that when it expands, it pushes the contact page down. I've tried doing this with position:relative, but doesn't seem to work.
Relevant CSS:
#container
{
padding:50px;
display:table-cell;
vertical-align:center;
width:auto;
}
#container a img
{
padding:10px;
opacity:1.0;
filter:alpha (opacity=100); /*for >IE8 */
}
#page1 img
{
display:block;
margin-left:auto;
margin-right:auto;
width:400px;
position:relative;
top:15px;
}
#page2 {
height:1200px;
font-family: Arial, sans-serif;
font-weight: bold;
color:purple;
}
#page3 {
height:1200px;
font-family: Arial, sans-serif;
font-weight: bold;
color:red;
}
#page3 img
{
display:block;
margin-left:auto;
margin-right:auto;
margin-bottom:-20px;
width:400px;
position:relative;
top:15px;
}