Jump to content

New to web design...


silververmine

Recommended Posts

I have been watching some excellent tutorials which have sped up my learning process no end but I felt I needed to find a forum that specialised in helping out newbies like myself.

 

Now I am having a problem currently with my H1 butting up against my navigation and it seems to ignore my top-margin, the left, bottom and right margin work all well and good but it just wont move down from my navigation.

 

If you need me to post my HTML and CSS i will be happy to, it is extremely basic, I have only just started creating a mock website for practise.

 

Any help with be greatly appreciated.

 

I have provided an image to show you what I mean.

 

28876010.jpg

Link to comment
Share on other sites

It's always easiest if we can see your page/site live on the web - next best thing is the code (html AND css) but just based on the image and your post, I'd suggest adding some margin-top to your h1. ..... ok - I just re-read what you said and you've already tried that. Try increasing by a bunch, just to see if you get a reaction. Or try a margin-bottom to the nav. Ideally, show us the page online, or the code.

Link to comment
Share on other sites

It's always easiest if we can see your page/site live on the web - next best thing is the code (html AND css) but just based on the image and your post, I'd suggest adding some margin-top to your h1. ..... ok - I just re-read what you said and you've already tried that. Try increasing by a bunch, just to see if you get a reaction. Or try a margin-bottom to the nav. Ideally, show us the page online, or the code.

 

 

/*Elements CSS Framework by Ben Henschel*/

/*Mass Reset*/

/*Thanks to Eric for this reset http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ */

 

html, body, div, span, applet, object, iframe, 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, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td

{

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-family: inherit;

font-size:100%;

text-align: left;

vertical-align: baseline;

}

 

a img {border:none;}

 

table {border-collapse: collapse; border-spacing: 0;}

q:before, q:after, blockquote:before, blockquote:after {content: "";}

 

 

/*----------------------------------------------Container Divs----------------------------------------------*/

 

body { background-color:#b77918;}

#wrapper { width:900px; margin:0px auto; background-color:#dd911b; border-left:dotted 1px #000; border-right:dotted 1px #000;}

#top { width:100%; height:25px; background-color:#000;}

#banner { background-image:url(images/banner2.jpg); }

 

/*-----------------------Navigation-----------------------*/

 

#nav { }

#nav ul { width:100%; background-color:#000; float:

right;}

#nav ul li { display:inline; }

#nav ul li a { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFF; text-decoration:none; font-weight:bold; padding:10px 20px; float:right;}

#nav ul li a:hover { background-color:#dd911b; }

 

/*-----------------------Content-----------------------*/

 

#content { }

#content h1 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:24px; font-weight:bold; margin:20px 20px;}

#content h2 { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold;}

#content p {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:12px; padding:0px 20px;}

#content img { padding:20px; }

 

#rightside { }

 

/*-----------------------Footer-----------------------*/

 

#footer { width:100%; height:25px; background-color:#000; }

 

/*-----------------------Classes-----------------------*/

 

.footer-text { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif ;text-align:center; color:#FFF; font-size:12px; padding-top:5px;}

 

 

 

 

That is my CSS if it helps at all, please keep in mind I only started learning around 2 days ago so that CSS itself is probably a mess :P

 

 

*EDIT*

 

You diamond :) the bottom margin on my nav div worked a treat, much appreciated, I am sure I will be back to bug you some more.

 

Thanks again :)

Link to comment
Share on other sites

To fix the "wrap" add clear: both; to your Paragraph CSS.

 

You can target that particular paragraph by giving it a class:

 

(HTML)

<p class="first_paragraph"> Your words go in here </p>

 

(CSS)

p .first_paragraph

{

clear: both;

}

 

Note that the "first_paragraph" used in the above example can be any name you desire as long as it is meaningful to you! (I hope I am not "talking down" too much. I do not know how firm a grasp you have on the functions of HTML and CSS overall.)

 

You seem to have made an excellent start, Good luck!

 

Alfie

Edited by daddyalfie
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...