Link ucieka do następnego wiersza.

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
mako241
Nowy
Nowy
Posty: 40
Rejestracja: wt sty 11, 2005 1:17 am
Lokalizacja: Tychy
Kontakt:

Link ucieka do następnego wiersza.

Post autor: mako241 »

Kod: Zaznacz cały

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK href="style.css" rel="stylesheet" type="text/CSS">
<title></title>
</head>
<body>
        <div id="stopka">
           <ul>
                    <li><a href="http://www.link.pl">O firmie</a></li>
                    <li><a href="http://www.link.pl">Oferta</a></li>
                    <li><a href="http://www.link.pl">Cennik</a></li>
                    <li><a href="http://www.link.pl">Certyfikaty</a></li>
                    <li><a href="http://www.link.pl">Kontakt</a></li>
           </ul>

                <div id="stopka_info">Projekt i wykonanie: <a href="http://www.link.pl" title="link.pl">adres.pl</a>
                </div>
        
         </div>

</body>
</html>

Kod: Zaznacz cały

#stopka{background:orange;width:700px;padding:15px;font:12px Arial, Helvetica, sans-serif;}
#stopka li{float:left;margin:0 auto;}
#stopka a{float:left;padding:0 10px;font:12px Arial, Helvetica, sans-serif;}
#stopka a:hover{}
#stopka_info{float:right;}
#stopka_info a{}
Co zrobić, aby wszystko było w jednej linii, aby link znajdował się z prawej strony "Projekt i wykonanie", a nie pod nim?
azamo
Nowy
Nowy
Posty: 75
Rejestracja: pn sty 29, 2007 12:45 am
Lokalizacja: Swarzędz
Kontakt:

Re: Link ucieka do następnego wiersza.

Post autor: azamo »

Kod: Zaznacz cały

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
#stopka{ overflow:hidden; background:orange; width:700px; padding:15px; font:12px Arial, Helvetica, sans-serif;}
	#stopka li{ float:left;margin:0 auto; list-style-type:none;}
		#stopka li a{ float:left; padding:0 10px; font:12px Arial, Helvetica, sans-serif; }
	#stopka_info{ float:right; }
</style>

</head>

<body>

<div id="stopka">
	<ul>
	<li><a href="http://www.link.pl">O firmie</a></li>
	<li><a href="http://www.link.pl">Oferta</a></li>
	<li><a href="http://www.link.pl">Cennik</a></li>
	<li><a href="http://www.link.pl">Certyfikaty</a></li>
	<li><a href="http://www.link.pl">Kontakt</a></li>
	</ul>
 
	<div id="stopka_info">Projekt i wykonanie: <a href="http://www.link.pl" title="link.pl">adres.pl</a>
	</div>
</div>
</body>

</html>
mako241
Nowy
Nowy
Posty: 40
Rejestracja: wt sty 11, 2005 1:17 am
Lokalizacja: Tychy
Kontakt:

Re: Link ucieka do następnego wiersza.

Post autor: mako241 »

Porównaj efekt w IE i Mozzilli :-(
azamo
Nowy
Nowy
Posty: 75
Rejestracja: pn sty 29, 2007 12:45 am
Lokalizacja: Swarzędz
Kontakt:

Re: Link ucieka do następnego wiersza.

Post autor: azamo »

Uporządkuj to, za bardzo mi się rozrósł ten kod. Ale działa:

Kod: Zaznacz cały

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
* { margin:0; padding:0; }
#stopka{ overflow:hidden; background:orange; width:700px; font:12px Arial, Helvetica, sans-serif;}
	#left { width:500px; float:left; }
		#stopka ul { padding:15px; }
			#stopka ul li{ display:block; float:left; list-style-type:none;}
			#stopka  ul li a { display:block; float:left; padding:0 10px; }
	#right { width:200px; float:right; }
		#stopka_info { padding:15px; }
</style>

</head>

<body>

<div id="stopka">

	<div id="left">
		<ul>
		<li><a href="http://www.link.pl">O firmie</a></li>
		<li><a href="http://www.link.pl">Oferta</a></li>
		<li><a href="http://www.link.pl">Cennik</a></li>
		<li><a href="http://www.link.pl">Certyfikaty</a></li>
		<li><a href="http://www.link.pl">Kontakt</a></li>
		</ul>
	</div>

	<div id="right">
		<div id="stopka_info">Projekt i wykonanie: <a href="http://www.link.pl" title="link.pl">adres.pl</a>
		</div>
	</div>
	
</div>
</body>

</html>
ODPOWIEDZ