- This topic is empty.
-
AuthorPosts
-
January 16, 2012 at 1:30 pm #36147dagashParticipant
hi ..
i am working on a wordpress theme , I’ve programmed the bulk, but several errors appeared to me suddenly, I do not why ,, my code appear correctly when i test it as css/html static page , but after i convert it errors appear and there are :
– some margins appear at the top .
– a horizontal scrollbar appear .i make a css reset to the values but nothing happened errors still there .
look at this image :THE IMAGE
also this is my css file and :
/* css 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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* this section for ARABIC , added by mine */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, input, ul, li, {
direction : rtl;
}
/* END ARABIC section */
/* END css reset */
/*main css*/
body {
font-family: Tahoma, Georgia, Arial, sans-serif;
font-size: 14 px ;
background : #e3eaf0 url(images/bodybg.png) repeat-x ;
}
#wrap {
width : 960px;
margin : auto;
}
#header {
background : #e3eaf0 url(images/bodybg.png) repeat-x ;
width : 960px;
height : 170px;
position : relative;
}
#headerbar {
background : #98aebe;
}
#searchbar {
position : relative ;
right : 700px;
}
#searchbar #searchbox {
width : 140px ;
margin-top : 2px 0px;
}
#searchbar input {
background : #e3eaf0;
color : #285677;
font-size : 12px;
font-family : Tahoma, Georgia, Arial, sans-serif;
margin: 2px 0px 3px 0px;
padding : 2px 5px 2px 5px;
border : 1px solid #f2f2f2;
-webkit-border-radius : 4px ;
-moz-border-radius : 4px ;
border-radius : 4px ;
text-shadow : 0 1px 1px #ffffff;
}
#searchicon {
background : url(images/Search.png) no-repeat ;
position: absolute;
left: 87px;
top: 5px;
cursor: pointer;
}
#mainheader {
hieght : 50px ;
overflow: hidden ;
margin-top: 10px;
}
#logo {
position : relative;
right : 10px;
float : right;
}
#advheader {
position : relative;
left : 10px;
float : left;
}
.menu-headermenu-container {
background : #f5f5f5; /* alternative color #e3e9ee */
margin : 10px 90px;
height : 28px;
width : auto;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px; /* future proofing */
border : 2px solid #f1f1f1;
/*another border */
box-shadow: 0 0 0 1px hsl(0, 0%, 90%); /* ++++++++++++++++dont forget to put the syntax for all browsers++++++++++++++++++*/
width : 760px;
}
.menu {
text-align: center;
padding-top: 5px;
}
.menu li{
display: inline;
padding: 8px 10px 7px 10px;
}
.menu a {
color : #5a6e7c; /* #658092 alternative color*/
text-decoration : none;
font-family : Arial, sans-serif;
font-size: 14pt;
padding : 2px ;
font-weight : bold;
}
.menu a:hover {
color : #fdfdfd;
background : #99aebe;
border-bottom : none ;
text-decoration : none;
-webkit-border-radius : 3px;
-moz-border-radius : 3px;
border-radius : 3px;
border : 1px solid #b8c9d6;
margin-left : -2px;
text-shadow : 0 1px 0 #627684;
font-weight : bold;
-webkit-transition : background 0.5s;
-moz-transition : background 0.5s;
-o-transition : background 0.5s; /* opera*/
transition : background 0.5s;
}
/* END header */
-o-transition : background 0.5s; /* opera*/
transition : background 0.5s;
padding : 0px 5px;
margin-left : -2px;
}
.spanlogin{
color : #fafafa;
padding-right: 10px;
}
#copyrights {
float : left;
display: inline;
padding-left : 5px;
}
#copyrights a {
}
and this is my html :
also , when you look at the image above , i used FIREBUG to detect the errors , it seems due to the tag at this line :
January 16, 2012 at 1:39 pm #94747TheDocMemberYou’ve done several things wrong.
1) Get wp_get_archives out of your < head> element – it doesn’t belong there.
2) wp_head(); should be placed INSIDE your < head> element. This is also what is adding the top margin – it’s for the admin bar. Add wp_footer(); just above your closing < /body> tag and you’ll see it appear.
3) You’ve used an HTML5 reset in your CSS file but you aren’t using the HTML5 docytpe.
January 16, 2012 at 2:06 pm #94750dagashParticipantfirstly i am not finish it up until now , ill trying to modify a lot of things ..
but thank you for your advices .also i have some questions :
– what about the navigation menu , is it in the header or index …? i think it is in header …
– about your 3rd point , what is a HTML5 doctype ..?
– i need to make a option panel for my css file , to modify the link color and hover and the font and etc … how coan i pass the css parameter to style.css file ..?January 16, 2012 at 2:17 pm #94753dagashParticipantit is working good after apply your advices ..
but also there is a mess in the code ..
when i register a navigation menu , a footer bar move to near the first post title , I DONT WHY …look at the images :
1- the problem
2- the actual position for the footer bar -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.