- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
-
AuthorPosts
-
June 14, 2012 at 6:40 pm #38509oespinozaiMember
Hi guys, english is not my natal tongue so I’m gonna try to explain myself in the best of ways.
I am designing my business website from scratch, gaining experience through every trial and error.
My webpage will have a central logo, surrounded on both its left and right sides by the nav. Each nav consists of 2 elements (Home and about in nav1, contact and blog in nav2)
Here´s the html and css of that part of the site, I just can´t get it to work right! I really hope you can help me understand how to do it right.Thank you!
HTML
CSS
#container {
margin:0 auto;
width:75%;
}
#container-top{
background-image:url(images/top_container_bakground_02.png);
width:100%;
position:relative;
}
#header {
width: 100%;
background-color:#ececec;
position:relative;
font-family:"Century Gothic";
text-transform:uppercase;
text-shadow: 1px 1px 1px #111;
margin-bottom:20px;
}
#logo {
position:absolute;
background-image:url(images/logo_03.png);
background-repeat:no-repeat;
background-position:center;
margin: 10px auto;
text-indent:-9999px;
float:left;
width:50%;
height:117px;
}
li {
display:inline;
}
.firstnav {
float:left;
width:25%;
position:absolute;
margin-left:10px;
}
.secondnav{
float:right;
width:25%;
}June 14, 2012 at 6:57 pm #104386oespinozaiMember?
June 14, 2012 at 7:07 pm #104388jackcuttingMemberHi, I’ve worked out two possible solutions. See below:
Solution 1:
CSS:#container {
margin:0 auto;
width:75%;
}
#container-top{
background-image:url(images/top_container_bakground_02.png);
width:100%;
position:relative;
}
#header {
width: 100%;
background-color:#ececec;
position:relative;
font-family:"Century Gothic";
text-transform:uppercase;
text-shadow: 1px 1px 1px #111;
margin-bottom:20px;
}
#logo {
/*position:absolute;*/
background-image:url(images/logo_03.png);
background-repeat:no-repeat;
background-position:center;
margin: 10px auto;
text-indent:-9999px;
/*float:left;*/
width:50%;
height:117px;
/*Additions*/
border: 1px solid black;
text-indent: 0px;
text-align: center;
}
li {
display:inline;
}
.firstnav {
float:left;
width:25%;
position:absolute;
margin-left:10px;
}
.secondnav{
float:right;
width:25%;
}
.clear{
clear: both;
}
HTML:
Solution 2:
CSS:#container {
margin:0 auto;
width:75%;
}
#container-top{
background-image:url(images/top_container_bakground_02.png);
width:100%;
position:relative;
}
#header {
width: 100%;
background-color:#ececec;
position:relative;
font-family:"Century Gothic";
text-transform:uppercase;
text-shadow: 1px 1px 1px #111;
margin-bottom:20px;
}
#logo {
/*position:absolute;*/
background-image:url(images/logo_03.png);
background-repeat:no-repeat;
background-position:center;
margin: 10px auto;
text-indent:-9999px;
float:left;
width:50%;
height:117px;
/*Additions*/
border: 1px solid black;
text-indent: 0px;
text-align: center;
margin-left: 25%;
margin-top: -10px
}
li {
display:inline;
}
.firstnav {
float:left;
width:25%;
position:absolute;
margin-left:10px;
}
.secondnav{
float:right;
width:25%;
}
.clear{
clear: both;
}HTML:
Hope this helps. :)
June 14, 2012 at 7:08 pm #104390jackcuttingMemberPs. I change the text indent and added a border just so I could see some content.
June 15, 2012 at 4:58 am #104420 -
AuthorPosts
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.