Pozycjonowanie zdjecia a header, pare pytan

pytanie zadane 11 listopada 2017 w HTML i CSS przez DragonCoder Nałogowiec (36,500 p.)

Witam,

mam problem z dostosowaniem zdjecia do strony, tzn. chce by bylo to logo/baner i chcialbym ograniczyc jago wysokosc oraz dac maksymalna szerokosc, tak by podczas zmiejszanai strony nie bylo widac bialego tla, ale mi sie to nie udaje.

<!--**11.11.2017 By DragonCoder**-->
<!--**MainPage**-->

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html"; charset = iso-8859-1"/>
	<meta name="Description" content="This page is about me and my projekt, there i try to do or there are finish" />
	<meta name="Keywords" content="DragonCoder, programming, projekt, OpenSecure, C++, Archipelago, NotToSee" />
	<title>DragonCoder</title>
	<link rel="stylesheet" href="./css/mainPageDragon.css">
	<link rel="stylesheet" href="./css/section.css">
</head>
<body>
<background color ="red"/>

<header>
<div class = "header"> 
<div class = "dragon"><h2>Dragon</h2></div>
		<div class = "coder"><h2>Coder</h2></div>
			<div class = "kontakt"><a href = "#kontakt_section"><h4>Kontakt</h4></a></div>
				<div class = "projects"><a href = "#projects_section"><h4>Projekty</h4></a></div>
					<div class = "technologie"><a href = "#technologie_section"><h4>Technologie</h4></a></div>
						<div class = "about_me"><a href = "#about_me_section"><h4>O mnie</h4></a></div>
							<div class = "logo"><a href = "#logo_section"><h4>Logo</h4></a></div>
		
		<div class = "languagesTabelle">
		</div>
</div>
</header>

<main>
<section id = "logo_section">
	<img src = "images/logo.jpg"/>
</section>
	<section id = "about_me_section">
	</section>
		<section id = "technologie_section">
		</section>
			<section id = "projects_section">
			</section>
				<section id = "kontakt_section">
				</section>
					
</main>


<footer>
<div class = "footer">
	<div class = "SocialMedia">
	<p>You can find me on:</p>
	<p> Copyright by DragonCoder &copy; 2017 
	</div>
</div>
</footer>

</body>
</html>

.css

.header{
	position: fixed;
				left: 0px;
				top: 0px;
				height: auto;
				width: 100%;
	background: #1F1F1F;
	
	text-align: right;
}
.logo{
	float: right;
	width: 10%;
	text-align:left;
	color: white;
}
.about_me{
	float: right;
	width: 10%;
	text-align:left;
	
	color: white;
}
.technologie{
	float: right;
	width: 10%;
	text-align:left;
	
	color: white;
}
.projects{
	float: right;
	width: 10%;
	text-align:left;
	
	color: white;
}
.kontakt{
	float: right;
	width: 10%;
	text-align:left;
	color: white;
}

.dragon{
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	float: left;
	width: 10%;
	color: black;
	text-align:right;
}

.coder{
	float: left;
	width: 1%;
	color: white;
	text-align:right;
}
.languagesTabelle{
}

#logo_section{
	position: absolute;
				left: 0px;
				top: 60px;
	float: left;
	width:auto;

}

.footer{
	position: fixed;
	left: 0px;
				bottom: 0;
				height: auto;
				width: 100%;
	background: #3F3F3F;
	
	color: white;
	font-size: 20px;
	text-align: center;

}

Oprocz tego mam pytania:

1) Powiekszajac obraz do 400% litery nachodza na siebie, czy da sie tego uniknac?

2) Czy przezroczysty i ruchomy header zrobie w css, czy jednak musze podpiac jquery?

3) Dalem dla elementow about_me, kontakt itd kolor bialy, ale przez to, ze uzylem odnosnika jest on niebieski/fioletowy jak moge sie pozbyc tego koloru i ustawic bialy.?

Co do kodu wiem, ze nie jest dobry, ale to moja 1. praca z Webem

Pozdrawiam i milego wiczoru

1 odpowiedź

odpowiedź 11 listopada 2017 przez shotokan Nałogowiec (39,660 p.)

Witam
Linki są domyślnie niebieskie, styl zmienisz za pomocą css, np. a { color: white;}.
Przeźroczysty i ruchomy header jak najbardziej zrobisz w css i nie potrzeba do tego jQuery.
Przy powiększaniu tak już jest, zawsze można ustawić letter-spacing (odstępy między znakami).
a to tło białe to masz na obrazku, czy element, w którym znajduje się obrazek, ma ustawione tło białe?
Pamiętaj, że jeśli ustawisz stałą wysokość, a szerokość obrazka będzie zmienna to będzie to brzydko wyglądało...

P.S. Skoro zaczynasz przygodę z WWW to może ucz się nowych technologii czyli zamiast float zastosuj flexboxa

Pokaż 8 poprzednich komentarzy

komentarz 12 listopada 2017 przez DragonCoder Nałogowiec (36,500 p.)

Dziekuje bardzo,

Mam jeszcze jedno pytanie, zrobilem stopke i co prawda jest przyklejona do dolu strony, ale chcialbym zeby byla widoczna gdy tylko zjade na sam dol strony, bo inaczej zalrywa tresc. Wiesz jak to zrobic?

komentarz 12 listopada 2017 przez shotokan Nałogowiec (39,660 p.)

Stopkę nie ustawiaj jako "przyklejonej" tylko daj jej się dostosowywać w zależności od wysokości kontenera strony.

<div class="container">
//ciało strony
</div>
<div class = "footer">
//ciało stopki
</div>

Jeżeli nie użyjesz stylu position to automatycznie stopka przyklei się do końca containera (tutaj mały minus, jeżeli ciało strony jest małe, container będzie się kończył w połowie ekranu, to stopka będzie w połowie ekranu widoczna, ale wtedy można dać min-height dla containera i po sprawie)
Tak mi się wydaje najprościej. Pamiętaj tylko o wyłączeniu elementu pływającego dla stopki, czyli clear: both

komentarz 12 listopada 2017 przez DragonCoder Nałogowiec (36,500 p.)

Position absolute, pomoglo, ale teraz nie jest przyklejona ani do krawedzi ani do dolu strony, pomimo padding, left, right i bottom

komentarz 12 listopada 2017 przez shotokan Nałogowiec (39,660 p.)

Bo position: absolute działa inaczej, dzięki temu każesz przeglądarce, aby umieściła dany element w konkretnym miejscu ekranu i go nie ruszała.
Proponuję przejść szybki tutorial o html i css, nie zaszkodzi, a na pewno się przyda :)
np.:
https://pl.khanacademy.org/computing/computer-programming/html-css