Dodatkowy pasek w tle na całą szerokość ekranu.

pytanie zadane 29 lutego 2016 w HTML i CSS przez Jakub Suszyński Użytkownik (540 p.)
zmienione kategorie 29 lutego 2016 przez Arkadiusz Waluk

Cześć

Staram się wykonać pasek długi na całą szerokość strony, jednak chcę aby znajdował się 'pod' logo i napisem. Chcę aby prezentowało się to tak:

chodzi o zielony pasek oczywiście, strona jest oparta o divy i dlatego nie wiem za bardzo jak i gdzie wcisnąć ten pasek. ponadto chciałbym aby był pod logiem ruletki, która jest obrazkiem w png.

6 odpowiedzi

odpowiedź 29 lutego 2016 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż kod, który do tej pory napisałeś.

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

Nie mam teraz możliwości doslac kodu, ale jesli chodzi o układ divow to wygląda to tak :D

odpowiedź 29 lutego 2016 przez Mateusz11 Pasjonat (22,910 p.)

odpowiedź 29 lutego 2016 przez xSvilen Mądrala (5,740 p.)
edycja 29 lutego 2016 przez xSvilen

.pasek{
   margin-left: 0px !important;
   margin-right: 0px !important;
   width: 100wv;
   height: 200px;
   background-color: #fff;
   position: absolute;
   margin-top: 200px;
}

wysokość i kolor zależy od ciebie

komentarz 29 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Dlaczego 100vw a nie 100% i dlaczego position:absolute?

komentarz 29 lutego 2016 przez xSvilen Mądrala (5,740 p.)
edycja 29 lutego 2016 przez xSvilen

absolute bo można bez problemu o działa na pasek innych divów ustawić pasek, a tutaj chyba nie ma za dużej różnicy między 100wv a 100%

komentarz 29 lutego 2016 przez Eimens Maniak (69,240 p.)

width: 100wv; a nie powinno być vw?

komentarz 29 lutego 2016 przez xSvilen Mądrala (5,740 p.)

Tak, przepraszam za literówkę

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

jednak gdzie powinienem umiejscowic diva "pasek"? Kod podałem wyżej.

komentarz 29 lutego 2016 przez xSvilen Mądrala (5,740 p.)

<div id="content">
  <div class="pasek"
            <div id="leftbox">Ogólne informacje o firmie. Zajmujemy się tym i tym od tylu i tylu.  Co proponujemy itp. Czas to pieniadz "skrypt zegarka" .</div>
            <div id="rightbox"><img src="ruletka.png" height="280" width="400" alt="logo ruletki" /></img></div>
  </div>
        </div>

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

ale w ten sposób logo ruletki będzie znajdowało się wewnątrz paska, a zależało mi na efekcie aby te logo wystawało ponad nim i pod nim

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

https://scr.hu/P3dkpK

wychodzi mi coś takiego, trochę tracę już cierpliwość :< nie bardzo wiem czemu tak mocno pojechało to na lewo

odpowiedź 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

Dla zainteresowanych dosyłam kod, może ktoś coś wymyśli:

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

<head>
 <meta charset="utf-8" />
 <title>PHU Omega</title>
 <meta name="description" content="Wyposażenie twojego kasyna!" />
  <meta name="keywords" content="kasyno, casino, roulette, poker, tokens, chip, cards	" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <link rel="stylesheet" href="style.css" type="text/css" /> 
  <link href='https://fonts.googleapis.com/css?family=Dosis&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>


<body>
	<div id="container">
		
		
		<div id="logo">
				PHU Omega
		</div>
		
		<div id="toolbar">
				<div class="menu">Oferta</div>
				<div class="menu">Doświadczenie</div>
				<div class="menu">Kontakt</div>
				<div class="menu">Złóż zamówienie</div>
				<div style="clear:both"></div>
			
		</div>
		
		<div id="content">
			<div id="leftbox">Ogólne informacje o firmie. Zajmujemy się tym i tym od tylu i tylu.  Co proponujemy itp. Czas to pieniadz "skrypt zegarka" .</div>
			<div id="rightbox"><img src="ruletka.png" height="280" width="400" alt="logo ruletki" /></img></div>
		</div>
		
		<div id="footer"> Copyright itp (footer) </ div>
	</div>



</body>

</html>

komentarz 29 lutego 2016 przez Comandeer Guru (601,550 p.)

Najłatwiej byłoby zrezygnować z odgórnego kontenera na wszystko i każdą część strony robić na osobnych kontenerach.

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

czy to nie przysporzy mi sporo więcej pracy?

komentarz 29 lutego 2016 przez Comandeer Guru (601,550 p.)

Jak kod CSS jest dobrze napisany, to nie ;)

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

Myślałem nad tym, ale słabo znam jeszcze cssa i boję się że mi się wszystko porozjeżdża.. No cóż, popróbuję.

odpowiedź 29 lutego 2016 przez BlvckFox Gaduła (4,240 p.)

http://www.w3schools.com/cssref/pr_pos_z-index.asp

komentarz 29 lutego 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

http://forum.pasja-informatyki.pl/34559/w3schools-nie-szerzmy-falszywej-propagandy ;)

komentarz 29 lutego 2016 przez BlvckFox Gaduła (4,240 p.)

Faktycznie, co oznacza, że z-index nie rozwiąże problemu paska pod zdjęciem?

komentarz 29 lutego 2016 przez Arkadiusz Waluk Ekspert (287,950 p.)

Szczerze to nie zagłębiałem się dokładnie w problem, chodziło mi po prostu o to, iż źródło jakie podlinkowałeś jest lekko mówiąc słabe - jako iż jesteś nowy na forum możesz tego nie widzieć, dlatego podałem wpis Comandeera z informacją i argumentami.

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

wydaje mi się że z-index rozwiąże problem, ale nadal nie wiem jak sprawić, aby pomimo umieszczenia paska w divie zawierającym całą stronę wychodził poza jego krawędzie.

komentarz 29 lutego 2016 przez ScriptyChris Mędrzec (190,190 p.)

Nie zauważyłem, abyś podał kod CSS.

nie wiem jak sprawić, aby pomimo umieszczenia paska w divie zawierającym całą stronę wychodził poza jego krawędzie.

Spróbuj zastosować position: relative i daj np. top: 50px; Zobacz czy pasek obniżył się o tyle, ile chcesz.

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

zadziałało, jednak teraz na krawędziach ekranu pasek jest jakby za krótki o 5-10px

w dodatku przesuwa mi teraz całą stronę w dół.

zamieszczam kody:

body
{
	background-color: #303030;
	font-family: 'Dosis', sans-serif;
}
#container
{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	/* background-color: red; */
	max-height: 900px;
}

#logo
{
	margin-top: 20px;
	color: white;
	font-size: 50px;
	letter-spacing: 3px;
	font-weight: 900;
}
#toolbar
{
	background-color: #303030;
	margin-top: 20px;
	color: #ffffff;
	margin-bottom: 20px;
}

#content
{
	
	min-height: 700px;
	color: #ffffff;
	width: 100%;
	margin: 0;
	 /* background-color: red; */
}
.menu
{
    float: left;
	padding: 5px;
	font-size: 25px;
	margin-right: 3px;
	border-right: dotted;
	border-right-width: 1px;
	border-right-color: #F4F3F2;
}
#leftbox
{
	float: left;
	width:  570px;
	padding: 15px;
	font-size: 33px;
	text-align: center;
	margin-top: 220px;	
	/*background-color: pink; */
	
}
#rightbox
{
	width:  570px;
	padding: 15px;
	float: left;
	text-align: center;
	/* margin-top: 150px; */
	margin-top: 150px;	
	
	 /*background-color: purple; */
}
#footer
{
	clear:both;
}
.pasek
{
   width: 100%;
   height: 200px;
   background-color: #101010;
   position: relative;
   /* margin-top: 200px; */
   top: 570px;
   z-index:  -1;
}

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

<head>
 <meta charset="utf-8" />
 <title>PHU Omega</title>
 <meta name="description" content="Wyposażenie twojego kasyna!" />
  <meta name="keywords" content="kasyno, casino, roulette, poker, tokens, chip, cards	" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <link rel="stylesheet" href="style.css" type="text/css" /> 
  <link href='https://fonts.googleapis.com/css?family=Dosis&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>


<body>
	<div class="pasek"></div>
	<div id="container">
		
		
		<div id="logo">
				PHU Omega
		</div>
		
		<div id="toolbar">
				<div class="menu">Oferta</div>
				<div class="menu">Doświadczenie</div>
				<div class="menu">Kontakt</div>
				<div class="menu">Złóż zamówienie</div>
				<div style="clear:both"></div>
			
		</div>
		
		<div id="content">
		
	
            <div id="leftbox">Ogólne informacje o firmie. Zajmujemy się tym i tym od tylu i tylu.  Co proponujemy itp. Czas to pieniadz "skrypt zegarka" .</div>
            <div id="rightbox"><img src="ruletka.png" height="280" width="400" alt="logo ruletki" /></img></div>
 
        

		</div>
		<div id="footer"> Copyright itp (footer) </ div>
	</div>



</body>

</html>

komentarz 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

udało się naprawić odstęp poprzez dodanie marginesu -200px. Nadal jednak pasek wydaje się być za krótki, wydłużanie go skutkuje pojawieniem się poziomego scrolla

odpowiedź 29 lutego 2016 przez Jakub Suszyński Użytkownik (540 p.)

OK OK podsumowując:

udało mi się zrobić prawie wszystko tak jak chciałem, wrzuciłem nawet ten temat na jakiś hosting:

http://omegaphu.opx.pl/

i jak widać na załączonym obrazku pasek ma kilka pikseli przerwy przy krawędziach.

Czym może to być spowodowane?

kody:

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

<head>
 <meta charset="utf-8" />
 <title>PHU Omega</title>
 <meta name="description" content="Wyposażenie twojego kasyna!" />
  <meta name="keywords" content="kasyno, casino, roulette, poker, tokens, chip, cards	" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <link rel="stylesheet" href="style.css" type="text/css" /> 
  <link href='https://fonts.googleapis.com/css?family=Dosis&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>


<body>
	<div class="pasek"></div>
	<div id="container">
		
		
		<div id="logo">
				PHU Omega
		</div>
		
		<div id="toolbar">
				<div class="menu">Oferta</div>
				<div class="menu">Doświadczenie</div>
				<div class="menu">Kontakt</div>
				<div class="menu">Złóż zamówienie</div>
				<div style="clear:both"></div>
			
		</div>
		
		<div id="content">
		
	
            <div id="leftbox">Ogólne informacje o firmie. Zajmujemy się tym i tym od tylu i tylu.  Co proponujemy itp. Czas to pieniadz "skrypt zegarka" .</div>
            <div id="rightbox"><img src="ruletka.png" height="280" width="400" alt="logo ruletki" /></img></div>
 
        

		</div>
		<div id="footer"> Copyright itp (footer) </ div>
	</div>



</body>

</html>

body
{
	background-color: #303030;
	font-family: 'Dosis', sans-serif;
}
#container
{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
	/* background-color: red; */
	max-height: 900px;
}

#logo
{
	margin-top: 20px;
	color: white;
	font-size: 50px;
	letter-spacing: 3px;
	font-weight: 900;
}
#toolbar
{
	background-color: #303030;
	margin-top: 50px;
	color: #ffffff;
	margin-bottom: 20px;
}

#content
{
	
	min-height: 680px;
	color: #ffffff;
	width: 100%;
	margin: 0;
	 /* background-color: red; */
}
.menu
{
    float: left;
	padding: 5px;
	font-size: 25px;
	margin-right: 3px;
	border-right: dotted;
	border-right-width: 1px;
	border-right-color: #F4F3F2;
}
#leftbox
{
	float: left;
	width:  570px;
	padding: 15px;
	font-size: 33px;
	text-align: center;
	margin-top: 220px;	
	/*background-color: pink; */
	
}
#rightbox
{
	width:  570px;
	padding: 15px;
	float: left;
	text-align: center;
	/* margin-top: 150px; */
	margin-top: 150px;	
	
	 /*background-color: purple; */
}
#footer
{
	clear:both;
}
.pasek
{
   width: 100%;
   height: 200px;
   background-color: green;
   position: relative;
   margin-top: -200px; 
   top: 590px;
   z-index:  -1;
}