So I've created the Navbar which jumps to sections on the page via clicking. It works for my 'projects' and 'contact' sections but when I click 'about' the navbar jumps to it, but becomes transparent and unclickable. I tried adding a padding-top X px; to the 'about' element, but it still doesn't work.
Code is as follows in Codepen:
HTML:
<body>
<div class="fluid-container">
<h2> My Web Portfolio</h2>
<!--Creates the Navigation bar -->
<div class="navbar">
About
Projects
Contact
</div>
<!-- this creates the About section-->
<div class="main">
<div id=about>
<h3>Blank</h3>
</div>
<!-- This creates the 'project' section of the webpage-->
<div id=projects>
<h3><pre>My tribute page to Neil Armstrong<pre></h3>
<a href="#"><img border="0" alt="My Tribute page" align="center" src="#"/>
</a>
</div>
<!--contact section-->
<div id=contact>
<h3>Contact me via Facebook, Twitter, and Instagram!<h3>
<a href="#" class="fa fa-facebook" ></a>
</div>
</div>
</div>
</body>
CSS:
body {
background-color:turquoise;
padding-top:25px;
}
h2 {
text-align:center;
}
.navbar {
overflow:hidden;
background-color:#333;
position:fixed;
top:0px;
width:100%;
}
.navbar a {
float:left;
display:block;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
font-size:17px;
}
.main {
padding:16px;
margin-top:65px;
}
#projects {
position:relatve;
width:150px;
height:100px;
margin-top:200px;
margin-left:150px;
}
#contact {
position:relatve;
text-align:center;
margin-top:800px;
}
#about{
position:relative;
text-align:center;
padding-top:25px;
}
What am I doing wrong here?
When the page jumps to about, the sections obscure the nav bar. If you set a z-index to #main and the nav bar, you can ensure the navbar is always above the sections. I hope this helps.
body {
background-color: turquoise;
padding-top: 25px;
}
h2 {
text-align: center;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0px;
width: 100%;
z-index: 10;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.main {
padding: 16px;
position: relative;
z-index: 0
margin-top: 65px;
}
#projects {
position: relatve;
width: 150px;
height: 100px;
margin-top: 200px;
margin-left: 150px;
}
#contact {
position: relatve;
text-align: center;
margin-top: 800px;
}
#about {
position: relative;
text-align: center;
padding-top: 25px;
}
<body>
<div class="fluid-container">
<h2> My Web Portfolio</h2>
<!--Creates the Navigation bar -->
<div class="navbar">
About
Projects
Contact
</div>
<!-- this creates the About section-->
<div class="main">
<div id=about>
<h3>Blank</h3>
</div>
<!-- This creates the 'project' section of the webpage-->
<div id=projects>
<h3><pre>My tribute page to Neil Armstrong<pre></h3>
<a href="#"><img border="0" alt="My Tribute page" align="center" src="#"/>
</a>
</div>
<!--contact section-->
<div id=contact>
<h3>Contact me via Facebook, Twitter, and Instagram!<h3>
<a href="#" class="fa fa-facebook" ></a>
</div>
</div>
</div>
</body>
Related
I am trying to edit the margin on the nav bar links, however when I change the margin, nothing happens. Does anyone know why this is happening?
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
max-width: 100%;
height: 100vh;
margin: 0px 0px 0px 0px;
color: #C2D3CD;
}
.topbar, nav {
background-color: #847E89;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
padding-right: 2%;
padding-left: 2%;
background-color: #C2D3CD;
color: #847E89;
height: 10vh;
cursor: pointer;
}
.donate-name {
padding-top: 4vh;
background-color: #C2D3CD;
border: none;
cursor: pointer;
}
#temp-logo {
padding-top: 0vh;
margin-left: 2%;
font-size: 22px;
}
.topbar {
display: block;
border-bottom: solid 1px #C2D3CD;
height: 10vh;
}
/* Nav Bar */
nav {
text-align: center;
height: 7vh;
}
.link, link:visited {
color: #C2D3CD;
text-decoration: none;
}
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
}
/* First Page */
#home-screen {
background-image: url(Images/beach-background-1-NEW.jpg);
height: 80vh;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
.text {
padding-top: 30vh;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
</head>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate" href="#"><button class="donate-name">Donate</button></a>
</div>
<!-- Nav -->
<nav>
<a id="mission-link" class="link" href="#">Mission</a>
<a id="about-link" class="link" href="#">About Us</a>
<a id="donations-link" class="link" href="#">What We Do</a>
<a id="contact-link" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<article class="text">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</article>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by Jacob Pieczynski</p>
</footer>
</body>
</html>
You're trying to apply margin-top to inline elements which you can't do since it would disrupt the flow of the page:
#mission-link, #about-link, #donations-link, #contact-link {
display: inline-block; /* Try making them inline block */
margin-top: 5%;
}
Try making the links inline-block.
Add display: inline-block like:
#mission-link, #about-link, #donations-link, #contact-link {
margin-top: 5%;
display: inline-block;
}
I have checked your code remove: height: 10vh; from topbar class
So to start off let me just note that I am not tech savy at all. I find most computers difficult and I wouldn't be taking this class unless I needed it to graduate from my university.
I'm trying to make a webpage for class thats due tomorrow and I am struggling to get all my stuff positioned properly. I made a mock up design in photoshop for what I'm trying to achieve but actually implementing it has been beyond fustrating.
Most floats aren't working(Probably my fault since I'm struggling to understand the concept).
I also made a secondary background image but its registering as a normal one I think.
Also is there a string of code I can use to center everyting like it is in my mock up?
How its suppose to look
How mine looks
My code:
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
<div class="container"></div>
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<main>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="articleone">
<img src="img/ArticleImageOne.png" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="articletwo">
<img src="img/ArticleImageTwo.png" alt="Bikes by River">
<h1>Krudder Gets a Break</h1>
<P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
<!--readon !-->
</div>
<div>
<img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
<h1>Kinnick's New Contract</h1>
<P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
<!--readon !-->
</div>
<div class="articlefour">
<img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
<h1>Froom In Third</h1>
<P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
<!--readon !-->
</div>
</main>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
THANK YOU FOR YOUR HELP
This might help you, but there are lot of issues in the above given code,hope you can get it correct , try this code for now
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
.article{
float: left;width: 100%;margin-bottom: 15px
}
.article img {float: left;width: 28%;margin-right: 1%}
.article h1{float:left;width: 70%;margin: 5px 0;text-align: left;}
.article p{float:left;width: 70%;margin: 5px 0;text-align: left;}
h1{text-align: left;}
footer{display: block;width: 100%;float: left;}
<div class="container">
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<div>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
</div>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
</div>
On my contact gif I have used the social media symbols as a link to my social media sites, however, the Twitter and the GitHub link is not working and I cannot figure out why. The Facebook and the CodePen link does work. Also is there a better way correctly line and organize the Here is the links so that they can stay more consistent? site if you want to take a look for yourself misaelalopez.com. Thank you for your help!
#contact
{
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding: 300px;
margin: 0 auto;
background-size: cover;
}
#contact h1
{
color: white;
position: relative;
text-align: center;
}
#contact h2
{
color: white;
position: relative;
text-align: center;
}
.facebook
{
position: relative;
float: left;
}
.twitter
{
position: relative;
left: 50px;
float: left;
}
.instagram
{
position: relative;
left: 100px;
float: left;
}
.gitHub
{
position: relative;
left: 150px;
float: left;
}
.codePen
{
position: relative;
left: 200px;
}
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
</div>
<div class="instagram">
<a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
</div>
<div class="gitHub">
<a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
</div>
<div class="codePen">
<a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
</div>
<br>
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
Try this..
#contact
{
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding: 300px;
margin: 0 auto;
background-size: cover;
}
#contact h1
{
color: white;
position: relative;
text-align: center;
}
#contact h2
{
color: white;
position: relative;
text-align: center;
}
.facebook
{
position: relative;
float: left;
}
.twitter
{
position: relative;
left: 50px;
float: left;
}
.instagram
{
position: relative;
left: 100px;
float: left;
}
.gitHub
{
position: relative;
left: 150px;
float: left;
}
.codePen
{
position: relative;
left: 200px;
float: left;
}
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png" width="20px" height="20px"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png" width="20px" height="20px"></a>
</div>
<div class="instagram">
<a target= "_blank" href= "https://www.instagram.com/misael2590/?hl=en"><img src= "http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram" width="20px" height="20px"></a>
</div>
<div class="gitHub">
<a target= "_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub" width="20px" height="20px"></a>
</div>
<div class="codePen">
<a target= "_blank" href="https://codepen.io/misael25900/"><img src= "http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen" width="20px" height="20px"></a>
</div>
<br>
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
The links ' don't work ' because you arrange the divs in a wrong way. They overlap each other. So the codepen div is overlapping the twitter,instagram,github links. Because it's positioned on top of them > you set left:200px which moves the codepen div 200px from left but because it doesn't have floaT:left like the others, it has by default width:100% , where 100% is the width of the entire #contact .content
If you set float:left to the divs, this is not the way to arrange them. You need to set them a width. Having 5 divs, that's 100%/5 = 20% . And because you want some margins between them ( spaces ) , you can use calc() as shown below.
Also that padding:300px on #contact is a very bad idea. I don't know what you were trying to achieve with that. Anyway, i changed that also
( Changed a bit your html also because using float gets the elements out of their default float in the document )
All CSS styles are at the top of the code, in HTML i added a .footer-content div wrapping around the footer text
#contact .Content {
float:left;
width:100%;
}
#contact .Content > div {
float: left;
width: calc(20% - 15px);
margin: 0 7.5px;
}
.footer-content {
float: left;
width: 100%;
}
img {
max-width: 100%
}
#contact {
background-image: url(https://lh3.googleusercontent.com/-2wI0PCtgivjkGQruaV-_2JYgbuD-yNFkRLN_DGAPXHxFq5gac-lnc5IheHflI6V_Z9AtgJjyfF-LBGa4tt_W6XB2Xs26xEyAH46S7kJlgiyHeIbi-ZM62zJuHcjJuZNnhO9lMGt6jw);
height: 250px;
padding:300px 30px;
width:100%;
margin: 0 auto;
background-size: cover;
}
#contact h1 {
color: white;
position: relative;
text-align: center;
}
#contact h2 {
color: white;
position: relative;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="contact">
<div class="Content">
<div class="facebook">
<a target="_blank" href="https://facebook.com/misael.a.lopez"><img src="http://www.freeiconspng.com/uploads/facebook-transparent-12.png"></a>
</div>
<div class="twitter">
<a target="_blank" href="https://twitter.com/cables25"><img src="https://s3.amazonaws.com/piktochartv2-dev/v2/uploads/a8f46883-78d7-4dfc-b0b3-be090e70e2b3/27c835d6dd2cbb4b696abd3e7ac9c0370bbedefe_original.png"></a>
</div>
<div class="instagram">
<a target="_blank" href="https://www.instagram.com/misael2590/?hl=en"><img src="http://bbcpersian7.com/images/instagram-clipart-png-transparent-background-3.jpg" alt="Instagram"></a>
</div>
<div class="gitHub">
<a target="_blank" href="https://github.com/Misael2590"><img src="https://cdn4.iconfinder.com/data/icons/iconsimple-logotypes/512/github-256.png" alt="GitHub"></a>
</div>
<div class="codePen">
<a target="_blank" href="https://codepen.io/misael25900/"><img src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" alt="CodePen"></a>
</div>
</div>
<div class="footer-content">
<h1>Reach out to me!</h1>
<h2>Email me at Misael25900#gmail.com</h2>
</div>
</div>
When i do my web design, meet a problem when i need to do
[LEFT LOGO] then [TITLE(CENTER)] then [RIGHT LOGO]
The problem appear at RIGHT LOGO there, it doesn't align with LEFT LOGO.
The right logo is under the line of TITLE(CENTER)
here is my code sample, thanks:
<div class="navigation">
<div id="left">
<a title="Multimedia" href="#">
<img src="images/logo.png"/>
</a>
</div>
<div id="title">Tutor Program</div>
<div id="right">
<a href="#" title="Inspire and Innovate">
<img src="images/tagline_alt.png"/>
</a>
</div>
css:
.navigation{
height:auto;
background-color:#666;
width:85%;
margin:auto;
min-width:800px;
}
#title{
text-align:center;
margin: auto;
font-family:‘Arial Black’, Gadget, sans-serif;
font-size: 20px;
color: #FFF;
}
#left {
float: left;text-align:left;
margin: auto;
}
#right {
float: right;text-align:right;
margin: auto;
}
a img { border: 0; }
simply move the right container above the left container check below
<div class="navigation">
<div id="right">
<a href="#" title="Inspire and Innovate">
<img src="images/tagline_alt.png"/>
</a>
</div>
<div id="left">
<a title="Multimedia" href="#">
<img src="images/logo.png"/>
</a>
</div>
<div id="title">Tutor Program</div>
</div>
I thing its work an another way i have some changes in style width depends of logo width. if it is not set in center then change the width %.
#title{
text-align:center;
margin: auto;
font-family:'Arial Black', Gadget, sans-serif;
font-size: 20px;
color: #FFF;
width:59%;
float:left;
}
.clear {
clear:both;
margin:0px;
font-size:0px;
}
and add a div after the last div with class clear.
<div id="right"> .... </div>
<div class="clear"> </div>
You could also display your divs as a table and table-cells, like this:
HTML
<div class="navigation">
<div id="left">
left
</div>
<div id="title">
title
</div>
<div id="right">
right
</div>
</div>
CSS
.navigation {
width: 100%;
display: table;
table-layout: fixed;
}
.navigation > div {
display: table-cell;
}
.navigation div:nth-child(1) {
background: lightgray;
}
.navigation div:nth-child(2) {
background: gray;
text-align: center;
}
.navigation div:nth-child(3) {
background: lightgray;
text-align: right;
}
Also check the JSFiddle Demo
I have image on the center of the page .
I want to display block of text inside the <div class='contain'> which will be float left to the image. 10px between the image to <div class='contain'>.
I don't want to move the image ,I want to image will stay in the center and just in the right side i put the <div class='contain'>.
I add property clear:both; to image or to the div and I think that I don't know how to use it.
jsfiddle Demo
how can I do that?
Thx
my code:
<h1><a id="toptitle" href="http://www.centerwow.com">portfolio</a></h1>
<div id="container">
<div id="all_pages">
<div class="page">
<h1>Home Page</h1>
<img src="images/yellow_flowers.jpg" width="300px" height="300px">
<div class='contain'>this is the home page bla bla bla</div>
</div> <!-- page1 -->
<div class="page">
<h1>About Us Page</h1>
<img src="images/Pink_Flowers.jpg" width="300" height="300px">
</div> <!-- page2 -->
<div class="page">
<h1>Contact Us Page</h1>
<img src="images/green_flowers.jpg" width="300" height="300px">
</div> <!-- page2 -->
</div> <!-- #all_pages -->
</div> <!-- #container -->
<div id="menu">
<ul>
<li id="1" class="link CC3366 active">Home</li>
<li id="2" class="link 33FF66">About</li>
<li id="3" class="link FFFF33">Contact Us</li>
</ul>
</div> <!-- #menu -->
<div id="footer"><a class="link" href="http://www.centerwow.com">mysite</a></div>
body {
background: #CC3366 url(images/temp.png) center 130px no-repeat ;
overflow:hidden;
margin:0;
padding:0;
}
#container {
width: 1000px;
overflow: hidden;
position: relative;
height: 450px;
margin: 0 auto;
}
#all_pages {
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.page {
width: 1000px;
height: 400px;
float: left;
text-align: center;
margin-top: 10px;
}
.page img {
margin-top: 10px;
}
#menu {
background: #000;
}
#menu ul {
list-style: none;
width: 457px;
height: 35px;
margin:auto;
}
#menu ul li {
float: left;
color: #FFFF33;
width: 150px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.active {
color: #fff !important;
}
#footer a{
font-size: 25px;
font-weight: bold;
}
#footer{
line-height: 100px;
background: #CC3366;
width:100%;
height:1000px;
text-align: center;
display: block;
}
#toptitle {
position: absolute;
width:100px;
top: 30px;
left: 30px;
color: #000;
cursor: pointer;
z-index:20;
}
a {
text-decoration: none;
}
#contain{
clear:both;
float:left;
margin-left:10px;
background: blue;
width:300px;
height:300px;
}
.clear{
}
$(".link").click(function(){
var page = $(this).attr("id");
var color = $(this).attr("class");
color = color.substr(5,6);
$('#all_pages').animate({left: (page-1)*(-1000) });
$("body").animate({backgroundColor: '#'+color});
$("#menu ul li").removeClass('active');
$(this).addClass('active');
});
I using table to do the job and it seems work out ok.
<center>
<table>
<tr>
<td valign=top align=right width=50%>Here is the text</td>
<td width=300px><img src='fun.jpg' width=300px height=300px></img></td>
<td width=50%></td>
</tr>
</table>
</center>