2014-12-18 3 views
-2

Может кто-то, пожалуйста, помогите мне, я боролся с заполнением для моего класса. На моем веб-сайте есть все, что содержится в середине. Я бы хотел, чтобы мой логотип находился в верхнем левом углу, моя панель навигации под моим логотипом (слева) и для моей домашней страницы я хотел бы, чтобы моя проектная заявка оставалась посередине, и я не уверен, почему нижняя строка не проходит через всю страницу.домашняя страница padding на css таблицы стилей

CSS таблицы стилей:

body 
{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
font-color:#333; 
text-align:left; 
background-image:url(../images/images/contemporary_china_2/contemporary_china_2.png); 
padding-left:300px; 
padding-bottom:200px; 
} 

#container{ 
    width:960px; 
    margin: 0 auto 0 auto; 
    text-align:right; 
} 

#header{ 
height:100px; 
margin: 10px; 


} 
#logo { 
    float:left; 
    padding-left:1px; 
    padding-top:1px; 
} 
#nav{ 
    width:300px; 
    margin:10px; 
    float:left; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding-left:100px; 
} 

#content { 
width:600px; 
overflow:auto; 
margin:30px; 
height:100%; 

} 


#footer { 
    clear:both; 
    text-align:right; 
    padding:10px; 
    margin:15px; 
    border-top:1px solid #ff9933; 

} 


.work-image { 
    width:460px; 
    height:500px; 
    background-color:#ff9933; 
    float:right; 
    margin-left:20px; 
} 
.work-text { 
    width:220px; 
    float:left; 
} 

/* Navigation */ 
#nav ul { 
    list-style-type:none; 
    margin:0px; 
    padding:0px; 

} 
#nav a:link, a:visited { 
    display:block; 
    width:200px; 
    font-weight:bold; 
    color:#000; 
    text-align:center; 
    text-decoration:none; 
    padding:10px 5px 10px 5px; 
    text-transform:lowercase; 
    padding-bottom:20px; 
} 
#nav a:hover, #nav a:active { 
    background-color:rgba(255,153,102,1); 
    text-decoration:underline; 
    color:rgba(255,0,0,1); 
} 
.active { 
    background-color:#ffb76a; 
    text-decoration:underline; 
    color:1b1b1b; 
} 

/*Font */. 
#footer p { 
    text-align:right; 
    font-size:.8em; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 

} 
#feature h2{ 
    font-size:24px; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    color:#000; 
} 
h2 { 
    font-size:24px; 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    color:#000; 
    padding-left;10px; 
} 

Вот исходный код извините за задержку:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<meta name="description" content="designing is limitless" 
<meta name="keywords" content="cupcakery, designing, creativity," 
<meta name="author" content="Tiffany Nicole" 
<title></title> 
<link href="css/2column-style.css"rel="stylesheet" type="text/css"/> 
</head> 

<body> 

    <div id="container"> 
     <div id="logo"> 
     <img src="images/images 2/images/TND-logo2_03.png"/> 
     </div> 
     </div><!--end header--> 
      <div id="nav"> 
      <ul> 
       <li><a href="#" class="active">Home</a></li> 
       <li><a href="resume.html">Resume</a></li> 
       <li><a href="formdemo.html">Form</a></li> 
       <li><a href="gallery.html">Gallery</a></li> 
       <li><a href="#">About Me</a></li> 
       </ul> 

      </div><!--end nav--> 

     <div id="content"> 


     <h2>DESIGN STATEMENT</h2> 




     <p style="font-style:color:#FFF; font-size:115%">Designing is an outlet for me. When I'm designing I feel that my creativity is unlimited. Many individuals may believe that designing is limited to a computer, pen and paper or through their apparel. However I feel that the art of designing is limitless, and can be applied to any aspect in my life My goal is to own a Cupcakery.With my love of graphic design and culinary arts, I feel that I can incorporate both aspects into my life. My limitless creativity allows me to think outside of the box, when making cupcake designs. 
     </p> 


     <img src="images/images 2/images/picforwebsite_02.png"/> 



     </div><!--end content --> 












     <div id="footer"> 
     <p>Copyright © 2014 Tiffany Nicole</p> 
     </div><!--end footer --> 



    </div><!--end container--> 







    </div><!--end container--> 
    <script> 
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 

    ga('create', 'UA-57389036-1', 'auto'); 
    ga('send', 'pageview'); 

</script> 


</body> 
</html> 
+0

Добавьте html aslo –

+1

, пожалуйста, сделайте скрипку или добавьте html –

+0

4 комментария, которые говорят то же самое. Должен был только поддержать исходный комментарий. – EternalHour

ответ

1

Если специально не требуется, чтобы написать свой собственный CSS, используя что-то вроде Bootstrap воли вероятно, сэкономит вам много времени и сил. Существует много документации и уже существующих шаблонов, которые, скорее всего, будут соответствовать вашим потребностям.

Удаление основного содержимого this и добавление логотипа и нижнего колонтитула звучит довольно похоже на ваше описание.