I tried using display: inline-block; to get the elements on the same row but it keeps moving down. I tried using margin to adjust the position but that'll mess up the responsive web function.
Here's how it looks now:
Here's how it should look:
My code so far:
#header .logo-wrap { padding: 50px 0 50px 0; }
#header p.site-desc {
color: #595959;
font-size: 18px;
line-height: 19px;
text-align-last: right;
width:70%;
padding-top: -5px;
letter-spacing: 4px;
}
#carousel {
position: relative;
display: inline-block;
width:70%;
margin-top: -4px;
}
<div class="logo-wrap">
<div class="container">
<div class="desktop-6 columns">
<h1><img src="http://i.imgur.com/wobJUCd.png" alt="" /></h1>
<!-- // .desktop-6 -->
<p class="site-desc">
Digital media designer<br />
Concept developer<br /><br /><br /><br /><br />
<p style="font-size:75px; line-height:50px; text-align-last: justify; letter-spacing: 3px; color: #595959; font-family: Neusa ExtraBold;">i</p></p>
<div id="carousel">
<div class="btn-bar">
<div id="buttons"><a id="prev" href="#"></a><a id="next" href="#"></a> </div>
</div>
<div id="slides">
<ul>
<li class="slide">
<div class="quoteContainer">
<p class="quote-phrase"
style="font-size:44px; line-height:45px; text-align-last: justify; letter-spacing: 3px; color: #595959; font-family: Neusa ExtraBold;"> minimize,</br>experiment,</br>& make grids</span>
</p>
</div>
</li>
</ul>
</div>
</div></div>
<!-- // .site-desc -->
</div><!-- // .desktop-6 -->
<div class="clear"></div>
</div><!-- // .container -->
</div><!-- // .logo-wrap -->
use float left for each element or for the ul to make it inline use ul li { display:inline; }
Related
I have this website with a nav bar. at the moment the nav text (theory, More) gets bold the on hover, however i have been trying to make the text scale/grow in a smooth transition as it hovers. But the text only seems to bolden at the moment and i cannot get the text to scale up
may someone look over my code and note my mistake
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="Developer" content="Alejandro Muratalla / ElitePower">
<title>Power Training | Home</title>
<style>
body{
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
nav{
float: right;
margin-top: 10px;
}
/* Header */
header{
background: #0D98BA;
color: #FFD700;
padding-top: 30px;
min-height: 70px;
border-bottom: #FF4500 3px solid;
}
#a{
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all .1s ease-in-out
}
header ul{
margin: 0;
padding: 0;
}
header li{
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding{
float: left;
}
header #branding h1{
margin: 0;
}
header .highlight, header .current a{
color: #000000;
font-weight: bold;
}
#a:hover{
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase{
min-height: 400px;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
<a>'s default display is inline. transform cannot be applied unless display is reset to value which allow sizing. (or formatting context). You can reset it to inline-block.
body {
font: 15px/1.5 Ariel, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global Settings*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
nav {
float: right;
margin-top: 10px;
}
/* Header */
header {
background: #0d98ba;
color: #ffd700;
padding-top: 30px;
min-height: 70px;
border-bottom: #ff4500 3px solid;
}
.a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
transition: all 0.1s ease-in-out;
display:inline-block;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: #000000;
font-weight: bold;
display: inline-block;
}
.a:hover {
font-weight: bold;
transform: scale(1.5);
}
/* Showcase */
#showcase {
min-height: 400px;
}
<header>
<div class="container">
<div id="branding">
<h1>Power Clan <span class="highlight">Training</span></h1>
</div>
<nav>
<ul>
<li><span class="highlight">Home</span></li>
<li>Theory</li>
<li>More</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="images" style="max-width:500px">
<img class="slide1" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
<h1>Learn Professional Stratagies With Us</h1>
<p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
</div>
</section id="newslater">
<div class="container">
<h1>Subscribe To Our Channel</h1>
<form action="https://www.youtube.com">
<button id="subscribe">Subscribe</button>
</form>
<section id="boxes">
<div class="container">
<div class="box">
<img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
<h3>Learn Theory</h3>
<p></p>
</div>
<div class="box">
<img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
<h3>Explore Team Plays</h3>
<p></p>
</div>
<div class="box">
<img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
<h3>Tips and Tricks Videos</h3>
<p></p>
</div>
</div>
</section>
<footer>
<p>© Power Clan Super Rocketball , ElitePower 2018</p>
</footer>
Note: I turned the three id="a" into class="a"
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>
I'm learning CSS with The Odin Project and I made a mockup of the Google.com homepage. Everything looked perfect until I resized the browser window and the elements move out of place.
I've been trying out many different methods on how to keep the divs (Google logo, search bar, and buttons) centered when the page is resized.
#header {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -125px;
width: 300px;
padding: 10px;
}
#topbar {
font-family: arial, sans-serif;
}
.centered {
width: 960px
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.15rem;
background-color: #f2f2f2;
font-family: arial, sans-serif;
font-size: 15px;
color: #666;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7D7676;
}
<title>Google</title>
<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
<!-- Top bar -->
<body>
<div id="topbar">
<p align="right">Gmail Images
<img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png"> </p>
</div>
<br>
<!-- Google Center Image -->
<div id="centered">
<div id="logo">
<img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400">
</div>
</div>
<!-- Search Bar and Buttons -->
<div id="search">
<form id="searchbar" width="500">
<br>
<input type="text">
<br>
</form>
<br>
<button type="button" id="firstbutton">Google Search</button>
<button type="button" id="secondbutton">I'm Feeling Lucky</button>
</div>
<!-- Footer -->
<div class="footer">
<p class="alignleft"> Advertising
<p class="alignleft">Business
<p class="alignleft">About
</p>
<p class="alignright">Privacy
Terms
Settings
</p>
</div>
jsFiddle
I feel it should be something like this but I'm not sure:
div {
position: relative
margin-left:auto;
margin-right:auto;
}
Note: I'll work on resizing and adding colors to the search bar and buttons after, my biggest concern in finding how to keep the search bar and buttons centered under the Google logo when the browser page is re-sized.
<div> is a block element and by default it takes 100% width of its parent.
If you try to center it using margin: 0 auto, then you won't get the expected result. You have to set width in order the margin to be applied.
See an example below:
.parent{
width: 400px;
height: 100px;
border: 1px solid blue;
}
.item{
width: 100px;
margin: 0 auto;
border: 1px solid green;
}
<div class="parent">
<div class="item">
<span>some text</span>
</div>
</div>
You can add the property text-align: center to your <div> ancestor with an id of #search.
#search{ text-align: center; }
This will center the <input> and <button> elements because they retain their inline characteristics.
#header {
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -125px;
width: 300px;
padding: 10px;
}
#topbar {
font-family: arial, sans-serif;
}
#search {
text-align: center;
}
.centered {
width: 960px
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.15rem;
background-color: #f2f2f2;
font-family: arial, sans-serif;
font-size: 15px;
color: #666;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #7D7676;
}
<title>Google</title>
<link rel="stylesheet" type="text/css" href="google-homepage-css.css">
<!-- Top bar -->
<body>
<div id="topbar">
<p align="right">Gmail Images
<img style="vertical-align:middle" src="http://i.imgur.com/xmMdSIp.png"> </p>
</div>
<br>
<!-- Google Center Image -->
<div id="centered">
<div id="logo">
<img id="header" src="http://i.imgur.com/hs6n5hR.png" width="400">
</div>
</div>
<!-- Search Bar and Buttons -->
<div id="search">
<form id="searchbar" width="500">
<br>
<input type="text">
<br>
</form>
<br>
<button type="button" id="firstbutton">Google Search</button>
<button type="button" id="secondbutton">I'm Feeling Lucky</button>
</div>
<!-- Footer -->
<div class="footer">
<p class="alignleft"> Advertising
<p class="alignleft">Business
<p class="alignleft">About
</p>
<p class="alignright">Privacy
Terms
Settings
</p>
</div>
Revised jsFiddle
I cannot figure out how to left float a div (filled with text and other divs) inline with an image with a fixed width. I have tried a host of options but I cannot get the second div to float inline.
How do I get the 'sidebbar-post-col2' to float inline with the 'featured-media' image div?
Thanks in advance
http://codepen.io/coreysimons/pen/waQEBE
CODE
.post-container {
width:40%;
display:inline-block;
height:auto;
overflow:hidden;
}
.post {
height:auto;
}
.sidebar-posts .featured-media {
width:auto;
display:block;
}
.sidebar-posts .featured-media img {
max-width: 90px;
max-height: 90px;
margin-right:20px;
overflow: hidden;
}
.sidebbar-post-col2 {
float:left;
width:auto;
display:inline-block;
}
.entry_author_image {
display: inline-block;
}
.author-meta {
font-size: 12px;
letter-spacing: .5px;
font-weight: normal;
margin: 0px;
display: inline-block;
padding: 0px;
float: none;
color: #333;
vertical-align: top;
text-decoration: underline;
}
.author_location {
padding: 0px;
text-transform: none;
font-size: 12px;
color: #999;
font-weight: normal;
letter-spacing: .5px;
display: inline-block;
float: none;
vertical-align: top;
text-decoration: none;
}
.sidebar-posts .post-header h2.post-title {
text-align: left;
font-family: 'Roboto';
font-weight: 900;
font-size: 1.1em;
line-height: 25px;
letter-spacing: 0;
padding-bottom: 10px;
}
.sidebar-posts .category-meta {
text-align:left;
color:#000;
margin-bottom: 5px;
margin-top:0px;
}
.sidebar-posts .post-submeta {
text-align: left;
float: none;
margin-bottom: 24px;
margin-left: 0;
border-bottom: 1px solid #aaa;
padding-bottom: 24px;
}
.sidebar-posts .post-header {
vertical-align: top;
padding:0;
}
<div class="post-container sidebar-posts">
<div class="post">
<div class="featured-media">
<a href="#" rel="bookmark" title="Crazy new GIF lookbook from Kenzo lookbook from Kenzo">
<img width="433" height="558" src="http://coreysimons.com/placeholder/placeholder-img-1.png" class="attachment-post-thumbnail wp-post-image" alt="Screen Shot 2015-07-28 at 22.45.13" /></a>
</div> <!-- /featured-media -->
<div class="sidebbar-post-col2">
<div class="post-header">
<div class="category-meta">Feature, sidebar</div>
<h2 class="post-title">Crazy new GIF lookbook from Kenzo lookbook from Kenzo</h2>
</div><!-- /post-header -->
<div class="post-submeta">
<div class="entry_author_image"><img src="http://coreysimons.com/placeholder/profile-image.png" alt="Corey Simons" width="16" height="16" /></div>
<div class="author-meta">Corey Simons</div>
<div class="author_location">Los Angeles</div>
</div><!-- /post-submeta -->
</div><!-- /sidebar-post-col2 -->
<div class="clear"></div>
<div class="spacer" style="clear: both;"></div>
</div><!-- /post -->
<div class="post">
<div class="featured-media">
<a href="#" rel="bookmark" title="Crazy new GIF lookbook from Kenzo lookbook from Kenzo">
<img width="433" height="558" src="http://coreysimons.com/placeholder/placeholder-img-1.png" class="attachment-post-thumbnail wp-post-image" alt="Screen Shot 2015-07-28 at 22.45.13" /></a>
</div> <!-- /featured-media -->
<div class="sidebbar-post-col2">
<div class="post-header">
<div class="category-meta">Feature, sidebar</div>
<h2 class="post-title">Crazy new GIF lookbook from Kenzo lookbook from Kenzo</h2>
</div><!-- /post-header -->
<div class="post-submeta">
<div class="entry_author_image"><img src="http://coreysimons.com/placeholder/profile-image.png" alt="Corey Simons" width="16" height="16" /></div>
<div class="author-meta">Corey Simons</div>
<div class="author_location">Los Angeles</div>
</div><!-- /post-submeta -->
</div><!-- /sidebar-post-col2 -->
<div class="clear"></div>
<div class="spacer" style="clear: both;"></div>
</div><!-- /post -->
</div><!-- /post-container -->
Ok so you have to do a few things:
1) On .sidebbar-post-col2 take off the float. You also need to add a pixel or percentage width to this div. That must be specified in order for inline-block to work I did 50%for my example.
2) Then on .sidebar-posts .featured-media I added a vertical-align: top; as well as changed display:block to display:inline-block
EDIT:
See my latest JSfiddle here:
https://jsfiddle.net/d239roug/2/
Essentially what I did was:
1) .post class I added display:table
2) On .sidebar-posts .featured-media and .sidebbar-post-col2 I added display:table-cell
The explanation for this is that display:table-cell distributes the space evenly depending on how much the inner content's width takes up within the display:table parent DIV.
I have a few anchor tags in my html that for some reason aren't working. As far as I can tell there is nothing wrong with the code so I am completely at a loss. Maybe I need a fresh pair of eyes to look it over to see if there is something obvious that I am missing? This website is not loaded onto a server yet but here is the code I am having issues with.
<div id="navigation">
<div class="wrapper">
<div class="right">
<div class="phone-number">
<p>24hr Turn Around Time 1-877-229-9665</p>
</div>
<div class="social-media">
<img src="images/facebook.png">
<img src="images/twitter.png">
<img src="images/yelp.png">
</div>
</div>
<div class="left">
<div class="logo">
<img src="images/logo.png">
</div>
<div class="text">
<p>Custom Made Orthotics</p>
</div>
</div>
<div class="navbar">
<nav>
HOME
SERVICES
COMPANY
CONTACT US
NEWS
</nav>
</div>
<div class="clear"></div>
</div>
</div>
#header {
font-family: calibri;
}
.text {
text-align:left;
font-size: 20px;
}
.navbar {
text-align: center;
font-color: #000000;
padding: 30px 20px 4px;
}
.phone-number {
text-align: right;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #000000;
height: 80px;
padding-top: 5px;
background-color: #ffffff;
z-index: 1;
}
#navigation a {
font-size: 20px;
padding-left: 5px;
padding-right: 15px;
color: #000000;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
.social-media {
text-align: right;
margin-top: 40px;
}
Fiddle, they seem to actually be working, as in they are all working links.
<div class="social-media">
<img src="images/facebook.png">
<img src="images/twitter.png">
<img src="images/yelp.png">
</div>
</div>
Ok so I had a co-worker fix this issue. changed the position to relative and added a z-index of 20. Now they are working!