Ułożenie obrazka na stronie

pytanie zadane 3 kwietnia 2016 w HTML i CSS przez maxo124 Nowicjusz (210 p.)




body{
	background-image: url('apple.jpg');
	background-size: cover;
	font-family: 'Titillium Web', sans-serif;
}

#container{
	width:1200px;
	margin-left:auto;
	margin-right:auto;
}

#logo{
	color:white;
	margin-top:20px;
	font-size:44px;
	letter-spacing:3px;
	font-weight:700;
	text-align:center;
	background-color:#000000;
	padding:5px;
}


#menu{
	background-color:#ffffff;
}


#sidebar{
	float:left;
	width:148px;
	background-color:#000000;
	color:#ffffff;
	min-height:620px;
	padding:20px;
	text-align:center;
	font-size:18px;
	border-right:2px dotted #ffffff;
}

#content{
	float:left;
	padding:40px;
	width:930px;
	text-align:justify;
	background-color:#404040;
	min-height:580px;
}

#footer{
	clear:both;
	background-color:#ffffff;
	text-align:center;
	padding:20x;
	font-size:18px;
}

.option{
	float:left;
	min-width:100px;
	font-size:18px;
	height:25px;
	padding:15px;
	border-right:2px dotted #000000;
	opacity:0,8;
}

.option:hover{
	cursor:pointer;
	background-color:#4D6E2B;
}

.optionL{
	border-bottom:2px dotted #ffffff;
	height:25px;
	padding:10px;
}
.optionL:hover{
	cursor:pointer;
	background-color:#4D6E2B;
	
}

<!DOCTYPE HTML>
<html lang='pl'>

<head>
	<meta charset='utf-8'/>
	<title>Poznaj MAC OS X YOSEMITE</title>
	<meta name='description' content='Zapoznaj się z MAC' />
	<meta name='keywords' content='MAC OS X YOSEMITE, system operacyjny' />
	<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
	<link rel='stylesheet' href='style.css'/>
	<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>

<body>
	<div id='container'/>
		
		<div id='logo'/>
			POZNAJ MAC OS X :)
			<img width='110px' height='80px' src='logo.jpg'/>
			
		</div>
		
		<div id='menu'>
			<div class='option'>Strona główna</div> 
			<div class='option'>Dystrybucje</div> 
			<div class='option'>Instalacja</div>  
			<div class='option'>Polecenia</div>  
			<div class='option'>O projekcie</div> 
			<div style='clear:both;'></div>
			</div> 
		
		
		<div id='sidebar'>
			<div class='optionL'>Strona główna</br></div>
			<div class='optionL'>Dystrybucje</br></div>
			<div class='optionL'>Instalacja</br></div>
			<div class='optionL'>Polecenia</br></div>
			<div class='optionL'>O projekcie</br></div>
		</div>
		
		<div id='content'>
			Dlaczego MAC OS X? </br>
			
			

		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus ante, pellentesque ut est non, eleifend aliquet quam. Quisque quis dui ipsum. Duis lobortis et lacus ac dapibus. Curabitur consectetur enim non velit pellentesque hendrerit. Nulla luctus nibh ac erat auctor, sed vehicula est finibus. Maecenas a turpis at libero dignissim aliquet. Phasellus posuere aliquet consequat. Integer feugiat ligula nulla, laoreet condimentum diam elementum ut. Aliquam viverra lorem metus, a euismod arcu egestas et. Aenean sagittis viverra dui, vel laoreet lorem. Sed ante magna, scelerisque sit amet nisl sit amet, consequat consectetur augue. Cras porta urna id egestas imperdiet. In egestas tincidunt varius. Integer at erat congue, tempus sapien eget, venenatis augue.
		</br></br>

		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus ante, pellentesque ut est non, eleifend aliquet quam. Quisque quis dui ipsum. Duis lobortis et lacus ac dapibus. Curabitur consectetur enim non velit pellentesque hendrerit. Nulla luctus nibh ac erat auctor, sed vehicula est finibus. Maecenas a turpis at libero dignissim aliquet. Phasellus posuere aliquet consequat. Integer feugiat ligula nulla, laoreet condimentum diam elementum ut. Aliquam viverra lorem metus, a euismod arcu egestas et. Aenean sagittis viverra dui, vel laoreet lorem. Sed ante magna, scelerisque sit amet nisl sit amet, consequat consectetur augue. Cras porta urna id egestas imperdiet. In egestas tincidunt varius. Integer at erat congue, tempus sapien eget, venenatis augue.
		</div>
		
		<div id='footer'>
			Poznaj MAC OS X - najlepszy system operacyjny. Strona w sieci od 2016r. &copy; Wszelkie prawa zastrzeżone.
		</div>

		</div>
		
		
	
	
	
	
	
	</div>
</body>
</html>	


























</html>

MÓJ PROBLEM POLEGA NA TYM ŻE W DIVIE LOGO OBRAZEK I NAPIS SĄ NA INNEJ WYSOKOŚCI I NIE SĄ POŚRDKU CZY KTOŚ WIE CO TRZEBA DODAĆ W MOIM KODZIE?

4 odpowiedzi

odpowiedź 3 kwietnia 2016 przez ormu16 Gaduła (4,980 p.)

#logo{
    color:white;
    margin-top:20px;
    font-size:44px;
    letter-spacing:3px;
    font-weight:700;
    text-align:center;
    background-color:#000000;
    padding-bottom: 15px;
}
#logo img{
	position: relative;
	top: 10px;
}

teraz spróbuj sobie to ustawić zmieniając "top"

komentarz 3 kwietnia 2016 przez maxo124 Nowicjusz (210 p.)

Wielkie dzięki

odpowiedź 3 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

<div id='container' />
         
        <div id='logo' />

<div ... /> ? Co to ?
http://how2html.pl/div-html-sekcje-strony/

<div id='logo'/>
            POZNAJ MAC OS X :)
            <img width='110px' height='80px' src='logo.jpg'/>
</div>

"POZNAJ MAC OS X :)" powinno być głównym nagłówkiem strony.
Używaj <header>.

<img width='110px' height='80px'

"px" ? To nie CSS...

</html>
 
</html>

Dwa razy zamykasz <html> ?

<div id='menu'>
            <div class='option'>Strona główna</div> 
            <div class='option'>Dystrybucje</div> 
            <div class='option'>Instalacja</div>  
            <div class='option'>Polecenia</div>  
            <div class='option'>O projekcie</div> 
            <div style='clear:both;'></div>
            </div>

To powinno być jako lista <ul>, a całość umieść w tagu <nav> i usuń <div style='clear:both;'></div>

Przykład:

<nav id="menu">
    <li><a href="#">Strona główna</a></li>
    <li><a href="#">Dystrybucja</a></li>
    <li><a href="#">Instalacja</a></li>
    <li><a href="#">Polecenia</a></li>
    <li><a href="#">O projekcie</a></li>
</nav>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus ante, pellentesque ut est non, eleifend aliquet quam. Quisque quis dui ipsum. Duis lobortis et lacus ac dapibus. Curabitur consectetur enim non velit pellentesque hendrerit. Nulla luctus nibh ac erat auctor, sed vehicula est finibus. Maecenas a turpis at libero dignissim aliquet. Phasellus posuere aliquet consequat. Integer feugiat ligula nulla, laoreet condimentum diam elementum ut. Aliquam viverra lorem metus, a euismod arcu egestas et. Aenean sagittis viverra dui, vel laoreet lorem. Sed ante magna, scelerisque sit amet nisl sit amet, consequat consectetur augue. Cras porta urna id egestas imperdiet. In egestas tincidunt varius. Integer at erat congue, tempus sapien eget, venenatis augue.
        </br></br>

Nie używaj nigdy <br>. Po prostu jak chcesz nowy wiersz to umieszczaj tekst w nowym paragrafie (<p>). No i tekst umieszczaj w <p>

<div id='footer'>
            Poznaj MAC OS X - najlepszy system operacyjny. Strona w sieci od 2016r. &copy; Wszelkie prawa zastrzeżone.
        </div>

Używaj <footer>. I w ogóle używaj nowe tagi HTML5, aby kod strony był semantyczny.

Musisz poznać: