Sprawdzenie i skrócenie strony

pytanie zadane 16 stycznia 2017 w HTML i CSS przez agit45 Obywatel (1,110 p.)

Mam wielką prośbę. Chciałbym stworzyć stronę na podstawie wyglądu fb z 2004/05 roku ( https://upload.wikimedia.org/wikipedia/en/f/f8/Thefacebook.png ) i prosiłbym o sprawdzenie poprawności kodu i pomoc w skróceniu go jak najbardziej. (niektóre znaczniki css nie działały w dokumencie css tylko musiały byc wpisywane w kodzie html w znaczniku np" style="nnnnn" ") Dziękuję z góry!

<!doctype html>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<title>strona główna</title>
<link href="arkusz.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="nav">
<div id="logo">
    [thefacebook]
    
    </div>
    <div id="menu">
    <a href="#" style="text-decoration: none;color:white; padding-right:10px;">login</a>
    <a href="#" style="text-decoration: none;color:white;padding-right:10px;">register</a>
    <a href="#" style="text-decoration: none;color:white;padding-right:10px;">about</a>
    </div>
    
    </div>
    
    <div id="content">
    
    
    <div id="logowanie">
        
        <form>
        <label> Email: <br>
            
            <input type="text"> <br>
            </label>
            <label>Password: <br><input type="password"></label> <br>
            
            <input type="submit" value="Register" style="background:#6d84b4; height:30px; width:87px; font-size:20px;"> <br>
        <input type="submit" value="Login" style="background:#6d84b4;height:30px; width:67px; font-size:20px;">
        </form> <br>
        
        </div>
        
        <div id="tresc">
        
        <img src="img/wlcmthefb.png">
           
        <h1 align="center">[ Welcome to TheFacebook ]</h1>
        <p>Thefacebook is an online directory that connects people through social networsk at colleges.</p>
            <p>We have opened up Thefacebook for popular consumption at <em>Harvard University</em>.</p>
            <p>You can use Thefacebook to: 
            <ul>
            <li>Search for people at your school</li>
                <li>Find out who are in your classes</li>
                <li>Look up your friends' friends</li>
                <li>See a visualization of your social network</li>
            
            
            </ul>
            
            </p>
        
        <p>To get started,click below to register.If you have already registered, you can log in.</p>
        
        <form align=center >
        <input type="submit" value="Register" style="background:#6d84b4;height:30px;width:87px; font-size:20px;">
        <input type="submit" value="Login" style="background:#6d84b4;height:30px;width:87px; font-size:20px;"> 
        
        
        
        </form> <br>
        </div>
        
        
    
    
    
    </div>

<div id="footer">

 <a href="#" style="text-decoration: none; padding-right:10px; color: #6d84b4;">about</a>
    <a href="#" style="text-decoration: none;padding-right:10px; color: #6d84b4;">contact</a>
    <a href="#" style="text-decoration: none;padding-right:10px; color: #6d84b4;">faq</a>
    <a href="#" style="text-decoration: none;padding-right:10px; color: #6d84b4;">terms</a>
    <a href="#" style="text-decoration: none;padding-right:10px; color: #6d84b4;">privacy</a>
    <p style="font-size:20px;">a Janusz Kowalski production</p>
    <p style="font-size:20px;">Thefacebook 2k17</p>


</div>

</body>

</html>

body
{
    background: #ffffff;
    margin: 0;
    padding: 0;
}


#nav
{
    height:100px;
    background:  #3b5998;
     color: #afbdd4;
   
}


#logo
{
    width:100%;
     text-align:center;
    font-size: 62px;
   
}
#menu
{
   width:70%;
    font-size: 20px;
    text-align:right;
    
  
   
   
    
}




#content
{
    
    width:100%;
    height:700px;
   
    margin-top:5px;
    
}

#logowanie
{
    text-align: center;
    float:left;
    width:20%;
    border:dashed 2px #3b5998;
    margin-left:5px;
    font-size: 30px;
}

#tresc
{
    margin-left:5px;
    float:left;
    width:79%;
    border:solid 2px #3b5998;
}

p
{
    font-size: 30px;
    font-family: Arial;
    
}

li
{
    font-size:30px;
    font-family: Arial;
}

#footer
{
    
    clear:both;
    width:100%;
    
    text-align: center;
    font-size:20px;
    
}

komentarz 16 stycznia 2017 przez Czort Nałogowiec (32,500 p.)

Na pewno brakuje <html>

2 odpowiedzi

odpowiedź 16 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Zakładam, że to jest twoja pierwsza strona.

Pierw cię jednak z błędu wyprowadze:

niektóre znaczniki css nie działały w dokumencie css tylko musiały byc wpisywane w kodzie html w znaczniku np" style="nnnnn"

Znacznik style jest specyficznym selektorem CSS (To samo byś uzyskał jakbyś zapakował <style></style>, więc nie ma prawa by to nie działało, a jak nie działa z powodu błędu programisty a nie od arkusza stylów CSS

Co do skrócenia HTML-a, to oprócz braku całkowitej semantyki oraz używanie tagów, które wkrótce mogą zniknąć, raczej skrócić się go nie da.

Pierwszy przykład, prawidłowej konstrukcji CSS:

a{
    text-decoration: none;
    color:white; 
    padding-right:10px;
}

Ten kod działa.

Wracając do twojego problemu, jeżeli chcesz bardzo ograniczyć CSS, szukaj taki właściwości których wartośc jest taka sama jak w innym selektorze (p,html itd). Przykład:

#logo
{
    width:100%; // I tu
     text-align:center;
    font-size: 62px;
    
}

#footer
{
     
    clear:both;
    width:100%; // Tu się powtarza
    text-align: center;
    font-size:20px;
     
}

Możesz napisać następująco:

#logo,#footer
{ 
width:100%;
 }

Albo dodając do swojego arkusza klase CSS

.width100{ 
width:100%; 
}

oraz dodając do danego selektora

<div id='footer' class='width100'></div>

Poza tym zapoznaj się media-queries. Ustawienie procentów nie zawsze skutkuje ;).

komentarz 16 stycznia 2017 przez agit45 Obywatel (1,110 p.)

Dziękuję za pomoc sprawdzę na bank!

komentarz 16 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Nie używaj id! Id powinno zostać jedynie dla JS-a :).

komentarz 16 stycznia 2017 przez Czort Nałogowiec (32,500 p.)

używanie tagów, które wkrótce mogą zniknąć (...)

Które tagi mogą wkrótce zniknąć?

odpowiedź 16 stycznia 2017 przez Szymon Polaczy Obywatel (1,660 p.)

Ustaw w tagu body dodatkowe text-align: center; ( i usuń to wszędzie gdzie się to powtarza ) tak samo zrób z font-size: 30px, spróbuj jednak przenieść style z html-a do css-a powinieneś dużo zaoszczędzić, a jak zapiszesz i nie będzie działać to napisz tutaj jak to zrobiłeś , a ktoś na pewno ci pomoże