Please Help Css

June 20, 201016 yr

I recently began learning css, html ect, and started to make a template for Wordpress. However being new to this i have done some poor coding on my navigation which meant that it displayed wrong on large screens. Could some please help me fix the code so the navigation appears correctly on all monitors.

Trying to fix the problem i managed to cause the navigation to be in the wrong place completely now and as i have not worked on it for a while, i am a bit rusty and cant get it back to how it was.

I would be very grateful is some just showed me how to place the navigation in the wright place and how i can correclty code it to suit all displays.

The Website is www.flatoutdesign.co.uk

My HTML for (Header.php) is

( I have highlighted the homepage code in red)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>

<?php if (is_home()) { echo bloginfo('name');

} elseif (is_404()) {

echo '404 Not Found';

} elseif (is_category()) {

echo 'Category:'; wp_title('');

} elseif (is_search()) {

echo 'Search Results';

} elseif ( is_day() || is_month() || is_year() ) {

echo 'Archives:'; wp_title('');

} else {

echo wp_title('');

}

?>

</title>

<?php if(is_search()) { ?>

<?php }?>

<?php wp_head(); ?>

</head>

<body>

<h1>FlatOut Design</h1>

<li class="about"> <a href="about" title="Link To My About Page">ABOUT</a></li>

<li class="portfolio"> <a href="portfolio" title="Link To My Portfolio Page">PORTFOLIO</a></li>

<li class="contact"> <a href="contact" title="Link To My Contact Page">CONTACT</a></li>

</ul>

Any My Css is

/*

Theme Name: FreeLance Design

Theme URL: http://dub-way.com

Description: FreeLance Theme.

Author: Ben Gibson

Author URI: www.dub-way.com

Version: 2.0.0

*/

@charset "utf-8";

/* RESET */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;}

/*----Main----*/

body {

width: 100%;

height: 100%;

background: #e8eefa url('style/images/background.png');

background-repeat: no-repeat;

margin: 0 auto;

}

/*----Title----*/

h1 {

font-family: "Trajan Pro";

text-align: center;

margin: 150px 0 0 0;

font-size: 3.5em;

}

/*----Links----*/

#links {

margin: 0 auto;

width: 900px;

overflow: hidden;

}

ul {

list-style: none;

}

#links li a {

text-decoration: none;

color: black;

float: left;

width: 25%;

}

a {

text-decoration: none;

color: black;

}

ul#links li.home {

margin: 10px 0 0 0px;

text-decoration: none;

font-family: trajan pro;

color: black;

font-size: x-large;

}

ul#links li.about {

margin: 30px 0 0 0px;

text-decoration: none;

font-family: trajan pro;

color: black;

font-size: x-large;

}

ul#links li.portfolio {

margin: -90px 0 0 600px;

text-decoration: none;

font-family: trajan pro;

color: black;

font-size: x-large;

}

ul#links li.contact {

margin: 30px 0 0 850px;

text-decoration: none;

font-family: trajan pro;

color: black;

font-size: x-large;

}

.copyright {

text-align: center;

color: #2E9AFE;

}

/*----Sidebar----*/

/*----Blog Sidebar----*/

.posttitle {

font-family: "trajan pro";

border-bottom: dotted;

border-bottom-width: thin;

border-bottom-color: #aec3ee;

color: #2E9AFE;

font-size: 0.9em;

}

#blog {

margin: -835px 0 0 900px;

border-bottom: dotted;

border-bottom-width: thin;

border-bottom-color: #aec3ee;

font-family: "trajan pro";

font-size: 0.8em;

}

/*Main Side Bar*/

#sidebar {

margin: 50px 0 0 850px;

}

/*Archives Sidebar*/

.archives {

font-family: trajan pro;

color: #2E9AFE;

font-size: 0.9em;

border-bottom: dotted;

border-bottom-width: thin;

border-bottom-color: #aec3ee;

}

li#archsub {

padding-bottom: 20px;

font-family: trajan pro;

}

/*----Meta Sidebar----*/

.meta {

font-family: trajan pro;

color: #2E9AFE;

border-bottom: dotted;

border-bottom-width: thin;

border-bottom-color: #aec3ee;

padding-top: 20px;

}

#metasub {

padding-bottom: 320px;

font-family: trajan pro;

}

/*----Categories Sidebar----*/

.categories {

font-family: trajan pro;

padding-bottom: 20px;

color: #2E9AFE;

border-bottom: dotted;

border-bottom-width: thin;

border-bottom-color: #aec3ee;

}

/*----Pages Sidebar----*/

.pages{

font-family: trajan pro;

color: #2E9AFE;

border-bottom: dotted;

border-bottom-width: thin;

border-bottom-color: #aec3ee;

padding-top: 20px;

}

/*----Search Sidebar----*/

li#search {

font-family: trajan pro;

color: #2E9AFE;

border-bottom: dotted;

border-bottom-width: thin;

border-bottom-color: #aec3ee;

padding-bottom: 40px;

}

/*----About Text----*/

#info {

margin: 0 auto;

width:1200px;

}

#about {

margin: -600px 0 0 50px;

}

h2 {

font-family: "trajan pro";

text-align: center;

font-size: 1.5em;

padding: 0 0 70px 0;

}

.who {

text-align: left;

width: 600px;

border-bottom: dotted;

border-bottom-width: thin;

padding: 0 0 20px 0;

border-bottom-color: #aec3ee;

font-family: "trajan pro";

}

.what {

text-align: left;

width: 600px;

padding-bottom: 40px;

font-family: "trajan pro";

}

.txtbackground {

background-image: url(style/images/txtbackground.png);

background-repeat: no-repeat;

width: 600px;

height: 400px;

margin: 400px 0 0 260px;

}

/*----Home Page Padding----*/

.padding {

padding: 0 0 300px 0;

}

/*----Sidebar Options----*/

#sidebar ul {

font-family: "trajan pro";

font-size: 0.9em;

}

#sidebar li {

}

#sidebar ul li {

}

#sidebar ul ul li {attributes}

#sidebar ul ul ul li {attributes}

#pagenav {attributes}

#pagenav ul {attributes}

#pagenav ul li {attributes}

/*----Contact-----*/

#contact {

margin: 0 auto;

width: 1200px;

}

#contactsidebar {

margin: 440px 0 0 0;

}

#twitter {

margin: 100px 0 0 400px;

}

#form {

margin: -270px 0 0 0;

text-align: left;

padding: 0 0 0 20px;

font-family: "trajan pro";

}

#facebook {

margin: 100px 0 0 400px;

}

h4 {

font-family: "trajan pro";

text-align: center;

font-size: 1.5em;

padding: 180px 0 0 0;

}

/*----Blog Page-----*/

#blogposts {

width: 700px;

margin: 100px 0 0 100px;

font-family: "trajan pro";

}

.mainblogtitles {

font-family: "trajan pro";

border-bottom: solid;

border-bottom-width: thin;

border-bottom-color: #aec3ee;

font-size: 1.3em;

}

.postmetadata {

font-family: "trajan pro";

font-size: 0.7em;

}

The Page should look like this

June 20, 201016 yr

Try to add display: block; to

#links li a {

text-decoration: none;

color: black;

float: left;

width: 25%;

display: block;

}

or

ul#links li {

display: block;

}

June 20, 201016 yr

Give this try

<ul id="links">

<li> <a title="Link To My Home Page" href="http://flatoutdesign.co.uk">HOME</a></li>
<li class="lower"> <a title="Link To My Contact Page" href="contact">CONTACT</a></li>
<li> <a title="Link To My About Page" href="about">ABOUT</a></li>
<li class="lower"> <a title="Link To My Portfolio Page" href="portfolio">PORTFOLIO</a></li>
</ul>

#links {
margin:30px auto 0;
overflow:hidden;
width:650px;
}

ul#links li{
color:black;
float:left;
font-family:trajan pro;
font-size:x-large;
text-align:center;
text-decoration:none;
width:25%;}

ul#links li.lower{
color:black;
float:left;
font-family:trajan pro;
font-size:x-large;
text-align:center;
text-decoration:none;
width:25%;
margin-top:50px}

#links li a {
color:black;
font-weight:bold;
text-decoration:none;
}

ptd
1

June 20, 201016 yr

Wow! Do it as mteam said and do not to forget to add him +1 to karma

June 20, 201016 yr

Author

Legend , Been trying to do that for a while now

June 20, 201016 yr

Author

To be annoying, with the code changes made, how can i spread the text out a little more, to reach further towards the end of the pages. I also noticed that home was a bit more spread apart than the others.

Thanks, sorry to be a pain

June 20, 201016 yr

ul#links{width:800px;} /* this increases the overall width of the navigation */

instead of having width at 25% remove the width from li and li.lower and try adding padding to ul links li

[ul#links li{padding:50px 40px 0;} /*50px is top 40px is left & right 40px each 0 is bottom*/

hope that helps

Please Help Css

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)