Skocz do zawartości

problem z ustawieniem div w css


qark

Rekomendowane odpowiedzi

Mam problem nie potrafie ustawić elemntów strony tak aby strona składała się z nagłówka 100% szerokości; treści podzielonej na element o szerokości dopasowanej do przegladrki i menu o stałej wielkości po prawej stronie; stopki 100% szerokości.

problem dotyczy elemntów znajdujących się w treści strony.

ten wyrównany do lewej przy wprowadzeniu width="100%" albo pokrywa albo przesuwa drugi element wyrównany do prawej z stałym width=200x

kod jaki mam to :

próbowałem coś z position realative i absolute pokombinowac ale to nic nie wyszło:(

Prosze o pomoc

#l_menu{

color: #FFFFFF;
margin				: 0px;
	margin-bottom : 5px;
border				: none;
padding				: 0px;
margin-right 			: 5px; 
width				: 100%;
	height				: 100%-200px;
float		: left;
background: #000000;

}




#box{
text-align		: left;
margin					: 0px;
margin-bottom 	: 5px;
border					: none;
padding					: 0px;
background: #FF3F4a;
width			: 200px;
	height		: 100%;
float			: right;
}

Sprawdź Kod SWIFT banków w Polsce np. SWIFT PKO BP. Kod SWIFT jest potrzebny do przelewów zagranicznych i krajowych przelewów walutowych

Odnośnik do komentarza
Udostępnij na innych stronach

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


<style>
#l_menu{
color: #FFFFFF;
margin: 0px;
margin-bottom: 5px;
border: none;
padding: 0px;
margin-right: 215px;
width: auto;
background: #000000;	
}

#box{
display: inline;
text-align: left;
margin: 0px;
margin-bottom: 5px;
border: none;
padding: 0px;
background: #FF3F4a;
width: 200px;
height: 100%;
float: right;
}

#footer, #header {width: auto; background-color: brown; clear: both;}
</style>
</head>

<body>

<div id="header">
<h3>Lorem ipsum dolor </h3>
<p>Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id, congue sed, euismod a, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum arcu. Nullam sollicitudin convallis velit. Vestibulum magna lacus, adipiscing vitae, sagittis in, porttitor non, nulla. Nulla purus eros, placerat at, rutrum ac, tincidunt quis, neque. Aliquam gravida tempus nibh. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat.</p>
</div>

<div id="box">
<h3>Lorem ipsum dolor </h3>
<p>Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id, congue sed, euismod a, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum arcu. Nullam sollicitudin convallis velit. Vestibulum magna lacus, adipiscing vitae, sagittis in, porttitor non, nulla. Nulla purus eros, placerat at, rutrum ac, tincidunt quis, neque. Aliquam gravida tempus nibh. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat.</p>
</div>

<div id="l_menu">
<h3>Lorem ipsum dolor </h3>
<p>Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id, congue sed, euismod a, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum arcu. Nullam sollicitudin convallis velit. Vestibulum magna lacus, adipiscing vitae, sagittis in, porttitor non, nulla. Nulla purus eros, placerat at, rutrum ac, tincidunt quis, neque. Aliquam gravida tempus nibh. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat.</p>
</div>

<div id="footer">
<h3>Lorem ipsum dolor </h3>
<p>Mauris fermentum feugiat justo. Quisque urna dolor, sollicitudin id, congue sed, euismod a, ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum arcu. Nullam sollicitudin convallis velit. Vestibulum magna lacus, adipiscing vitae, sagittis in, porttitor non, nulla. Nulla purus eros, placerat at, rutrum ac, tincidunt quis, neque. Aliquam gravida tempus nibh. Aenean eleifend facilisis nisi. Aliquam erat volutpat. Fusce ac nisl. Donec malesuada. Suspendisse ut est eget odio congue pellentesque. Morbi varius condimentum erat.</p>
</div>

</body>
</html>

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności