I'm a total noob at this... I did the whole code academy classes, can't seem to find an answer to my problem anywhere. Basically my site is centralised, from top to bottom it goes;
Logo
Navigation Bar
{Huge random space)
Picture
Copyright note
It's this space I'm trying to get rid of so that the space I have between my logo and the nav bar matches the space between the nav bar and the picture...
Here is my HTML;
<!DOCTYPE html>
<html>
<head>
<title>Access All Areas - Fashion</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div style="min-width: 960px; min-height: 760px; margin: 0 auto;">
<!-- AAA Logo -->
<div class="image">
<center>
<img src="a1.jpg" alt="Access All Areas Logo" width="750px"
height="320px">
</center>
</div>
<!--Navigation Bar-->
<div class="nav">
<center>
<ul>
<li class="main">HOME</li>
<li class="live">LIVE</li>
<li class="studio">STUDIO</li>
<strong><li class="fashion">FASHION</li>
</strong>
<li class="weddings">WEDDINGS</li>
<li class="portraits">PORTRAITS</li>
<li class="about">ABOUT
CONTACT</li>
</ul>
</center>
</div><!--Nav-->
</div><!--Style-->
<!--COVER IMAGE-->
<center>
<div class="cover">
<img src="images/fashion.jpg" alt="Access All Areas Fashion Image"
width="1400px" height="2300px">
</center>
</div><!--Cover-->
<!--Copyright-->
<center>
<div id="copyright">
<p><strong>ALL RIGHTS RESERVED ACCESS ALL AREAS PHOTOGRAPHY</p></strong>
</div><!--Copyright-->
</center>
</body>
</html>
and my CSS;
li {
display:inline;
}
.nav a {
font-family:arial;
font-size:18px;
color: black;
padding:0px 75px 0px 25px;
}
a {
text-decoration:none;
}
.cover {
margin-top:0px;
}
.main {
text-weight:strong;
}
p {
font-family:arial;
font-size:18px;
font-weight:bold;
}
I really hope someone can help me. Another couple of things I'm looking to do is to relocate the copyright text to the bottom left of the image and also make a grid of different sized images and have no idea where to start.
Many thanks
Peter James
Would have been great and easy to solve your problem, if you had provided us with a jsfiddle. But anyway, I think min-height is causing the problem. As you have forcing the header to be 670px tall. See here http://jsfiddle.net/0v4fsg6z/ I have reduced the height to remove the space before Picture Copyright note.
Did you try and set your img tag to position: absolute?
Related
The solution has been found. The code is below. Thank you to everyone who helped.
The Solution was to clear the float, the code below fixed it for me.
.div#content:after {
content:"";
display:table;
clear:both;
}
Thanks Again.
Original Question
I have 2 Divs, one being "Content" where all the content of my site is in. And another div named "updates". I want the div "content" to resize its height so that all the divs inside of it and fit.
Here's an image explaining my problem easier Imgur Link, Not high enough rep to post image directly.
Here's my full source code (html) (along with the css of content div and updates div.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>MCSocial</title>
<script type="text/javascript" src="src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="src/jquery.tinycircleslider.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<nav>
<ul class="nav">
<li class="left">MCFish</li>
<li>Home</li>
<li>News</li>
<li>Members</li>
<li>Media</li>
</ul>
</nav>
<a href="#"><div id="block">
<img src="img/mojang.jpg" height="200px" width="850px">
</div></a>
<a href="#"><div id="block">
<img src="img/minecraft.jpg" height="200px" width="850px">
</div></a>
<div id="updates">
<img src="img/update.png" height="48px" width="140px">
<!--post updates here-->
<h3 class="sub-title">Update 1.5</h3>
<p class="list">Added a new homepage! More simple to navigate! Enjoy!<br>Please send me some feedback here!</p>
<h3 class="sub-title">Update 1.4</h3>
<p class="list">Cleaned up code!</a></p>
<h3 class="sub-title">Update 1.3</h3>
<p class="list">Added new themes! Check them out!</a></p>
<h3 class="sub-title">Update 1.2</h3>
<p class="list">Renamed Site: from MinecraftFishing to MCFish!</a></p>
<h3 class="sub-title">Update 1.0</h3>
<p class="list">Site goes LIVE!</p>
<!--end post updates-->
</div>
<div id="twitter">
<img src="img/twitter.png" height="48px" width="140px"><br><br>
<a class="twitter-timeline" href="https://twitter.com/FluffyRabbitzZ" data-widget-id="544642022154723328">Tweets by #FluffyRabbitzZ</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="footer">
<p>©2014. MCSocial. All Rights Reserved.</p>
</div>
</div>
</div>
</body>
</html>
and the CSS;
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: auto;
border-radius: 2px;
min-height: 100%;
position: relative;
}
div#updates {
float: left;
margin-left: 2.6%;
}
Thanks for any help.
You should clear the float.
Add overflow CSS property (for example :auto) to the div#content.
A solution for modern browsers :
.div#content:after {
content:"";
display:table;
clear:both;
}
You have to clear the floating content:
<div style="clear:both"></div>
before closing yout div.content.
I'm creating and designing a mini social networking website for our school's Science Fair, and I already have a problem at the designing stage. :(
So I've created a few PSDs on how my website should look like, but it seems harder to translate my designs into HTML/CSS. My current trouble right now is this navigation bar that isn't cooperating with me...
In short, this navigation bar is very simple; the logo, with the title, a subtitle, and a few menu options (Login, Sign up). I'm using float:right; to float my options to the right, but that isn't working very well.
The options of my navigation bar are jutting out, below the Navigation Bar. It's really odd; when I take out the float:right; it seems perfectly fine, but is to the left. I would really like it to be on the right side.
A sample of the website is available at http://ticktalk.me.pn/. A PSD of the Sign-Up Page is available here: http://img1.imagilive.com/0314/tickTalk-signup.jpg.
Please feel free to "View Page Source" and investigate what I've done wrong. A direct link to the css is available at http://ticktalk.me.pn/css/style.css.
Thanks in advance.
EDIT:
This is my Navigation Bar HTML...
<div class= "navbar-header">
<div class= "navbar-title"><a href= "#">
tick<span class= "bookfont">talk</span>
</a></div>
<div class= "navbar-subtitle">
social networking around the clock
</div>
<div class= "navbar-menu">
<div class= "navbar-option login-button">
Login
</div>
<div class= "navbar-option navbar-checked signup-button">
Sign Up
</div>
</div>
</div>
and this is my CSS:
.navbar-header {
display:block;
background-color: rgb(0, 241, 73);
padding:10px;
margin-bottom:75px;
}
.navbar-logo {
display:inline-block;
}
.navbar-title {
display:inline-block;
font-size: 52px;
margin-left:10px;
margin-right:5px;
}
.bookfont {
font-weight: 500;
}
.navbar-subtitle {
display:inline-block;
font-size: 30px;
}
.navbar-menu {
float:right;
}
.navbar-option {
display:inline-block;
font-size:25px;
padding:20px;
padding-left:30px;
padding-right:30px;
}
.navbar-checked {
background-color: rgb(0, 217, 63);
}
Put the element with that has "float: right" before the rest of the elements on that line.
Basically, move <div class="navbar-menu">...</div> before <img src="logo.png" ...>.
Or, in the sample code of the edited question, move <div class="navbar-menu">...</div> before <div class="navbar-title">...</div>.
I am not sure regarding the technical justification to this, but floats are better put before the non floats.
Perhaps this is because it assumes there is no room for the floating element.
Try elements on the left side wrapping with another div. Like this for example:
<div class="navbar-header">
<div class="another-div">
<img src="logo.png" alt="logo.png" class="navbar-logo" width="47" height="47">
<div class="navbar-title">
tick<span class="bookfont">talk</span>
</div>
<div class="navbar-subtitle">
social networking around the clock
</div>
</div>
<div class="navbar-menu">
<div class="navbar-option login-button">
Login
</div>
<div class="navbar-option navbar-checked signup-button">
Sign Up
</div>
</div>
</div>
Then give that .another-div CSS property float:left, and don't forget to set a hight for the .navbar-header after this.
.another-div{
float: left;
}
.navbar-header{
height: 80px;
}
This should work.
I have a problem with this example: http://jsfiddle.net/JYkUS/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FSou1::Верстка макета</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="logo-wrapper">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="Logo" width="90" height="90" />
</a>
</div>
<div class="logo-text">
<span>Happy Nanny</span>
</div>
<div class="menu">
<ul>
<li class="first">HOME</li>
<li>SERVICES</li>
<li>NEWS & PRESS</li>
<li>FIND JOB</li>
<li>CONTACTS</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="header">
<div class="header-text">
<span class="easy-way">THE EASY WAY</span>
<span class="find-the-best">TO FIND THE BEST</span>
<div class="clear"></div>
<p>babysitters, childminders, nannies or private tutors</p>
</div>
</div>
</body>
</html>
Span with text
<span class="easy-way">THE EASY WAY</span>
as default has margin-left, but i don't know why. I really don't want to set a negative value to margin-left. Is it possible to align this span to left border and why does it now have margin with such value?
P.S. Watched in Google Chrome (firefox doesn't have this margin)
EDIT:
Just if i remove this style:
.logo-wrapper .logo, .logo-wrapper .logo-text {
float: left;
}
my span goes to left border =\ but why is it so?
EDIT2: Other way, to move <div class="clear"></div> from 'logo-wrapper' container, to root-level as
<div class="logo-wrapper">
<div class="logo"></div>
<div class="logo-text"></div>
<div class="menu"></div>
<!-- FROM HERE -->
</div>
<div class="clear"></div> <!-- MOVE HERE -->
<div class="header">
<div class="header-text">
<span class="easy-way">THE EASY WAY</span>
<span class="find-the-best">TO FIND THE BEST</span>
<div class="clear"></div>
<p>babysitters, childminders, nannies or private tutors</p>
</div>
</div>
But still can't understand, why floating still work after inner clear:both div
EDIT3: Is it because float:right menu even goes "righter", than div with clear:both?
The margin is actually applied on the body tag. You can remove it using:
body {
background: none repeat scroll 0 0 #F8F7E5;
font-family: Arial;
font-size: 100%;
margin-left: 0;
margin-top: 40px;
}
Working Example: http://jsfiddle.net/JYkUS/2/
This is commonly handled using a reset.css file which removes all browser specific styling from the page, so you can start from a single base point when creating a cross browser compliant webpage. I would recommend applying such a strategy to the site.
That is because you haven't set the body margin to 0
Make it margin:40px 0 0 0
body {
margin: 40px 0 0 0;
font-size: 100%;
font-family: Arial;
background: #f8f7e5;
}
DEMO
Im working on a website, and Im trying to put a navigation bar in the navigation divider I made, however when I put the image in, it doesnt go into the divider, even though its between the tags.
Heres what it looks like:
Heres My code:
CSS:
body{background-color:#030303}
#wrapper {width:800px;
margin:0 auto;
}
#header {background-color:yellow;
text-align:center;
height:50px;
}
#footer{clear:both;
background-color:yellow ;
text-allign:center;
}
#logo {float:left;
width: 139px;
background-color: black;
text-align: left;
height:70px;}
#navigation {width: 800px;
background-color:#EDEDED;
height:50px;
}
#sidebar {float:left;padding:20px; background-color:green;text-align:right;width:100px;height:460px;}
#content {float:right;width: 620px;
padding:20px; background-color:gray;
text-align:left; height:500px;
border-color:#0017FF;
}
HTML:
<! DOCTYPE html>
<html>
<head> <title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
This is my header.
</div>
<div id="logo">
<br/>
<img src="images/SubZer0-logo-and-name.png" width="140" height="50" align="left"></div>
<div id="navigation">
<img src="images/subzero-banner-new.png" width="750" height="45" align="top">
</div>
<div id="content">
This is my content box.
</div>
<div id="sidebar">
This is my sidebar.
</div>
<div id="footer">
This is my footer.
</div>
</body>
</html>
How Do I fix this?
Thank you!
Never Mind, I fixed it... Turns out the image was too big for the container.. I dont understand why though, Since the Containter was 800x50 and the image was 750x45, but it works now and thats what matters.
I am trying to modify the HTML5 Boilerplate header to have a central image with a word either side like so:
as you can see I managed to do it, this was however only using parts of boilerplate and bad css that broke h5bp's usefulness. I would like to utilize h5bp correctly now and achieve the same thing. I'm just not sure how to do it.
My current attempt looks like this:
The image is not in between the words, even tho the order in the mark up is like so:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
Relevant CSS:
.center { display: table; margin: 0 auto; }
#title
{
padding: 20px;
display: inline;
font-size: 4.5em;
border-top: 4px solid #5dc1c4;
border-bottom: 4px solid #5dc1c4;
}
If anyone could explain why the text is not either side of the image that would be greatly appreciated.
Thank you
Edit:
While the answer below is valid I actually solved this problem by putting the < img > into the < h1 > instead of having them separated, like so:
<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>
With your HTML and just this CSS, the three items will display together on one line:
.center h1 {display: inline;}
Working demo: http://jsfiddle.net/jfriend00/yK7Qy/
FYI, I notice that you're using the same id="title" in multiple places. That won't work for you because a given id can only be present on one object in the page. You probably want to change that to class="title".
It may be easier to just put all the text and image in one <h1> tag like this:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1>
<span class="title">First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span class="title">Second</span>
</h1>
</div>
</header>
</div>
Demo here: http://jsfiddle.net/jfriend00/CHv4k/
Try using display:inline-block; rather than display:inline. I don't have the project in front of me so I'm not sure of this will work.
However, if it does the image will be in the wrong spot. You must simply use vertical-align or margin-top:-##px.
A slightly different approach, using spans, and only one h1 tag:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 class="title">
<span>First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span>Second</span>
</h1>
</div>
</header>
</div>
And I also changed some of the CSS:
.center h1 {display: block; }
// Add vertical align to the image, rather than the h1
.center img {margin: 0 10px; vertical-align: middle;}
Fiddle here