Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] jak to przerobić
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
itson
13.11.2007, 17:23:18
mam taką stronkę
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6.  
  7. <title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
  8.  
  9.  
  10. <link rel="stylesheet" 
  11. href="ssb1.css" 
  12. type="text/css" />
  13.  
  14.  
  15. </head>
  16. <body>
  17. <div id="maincontainer">
  18.  
  19. <div id="topsection"><div class="innertube"><h1>CSS </h1></div></div>
  20.  
  21. <div id="contentwrapper">
  22. <div id="contentcolumn">
  23. <div class="innertube"><b>Content Column: <em>Fixed</em></b> 1</div>
  24. </div>
  25. </div>
  26.  
  27. <div id="leftcolumn">
  28. <div class="innertube"><b>Left Column: <em>180px</em></b> 2 wwwwwwwwwwwwwww w       f sg sdfg sdg sd gs gsd g sdg sd sd gsd sd asdf sdg sgfd gsd sdg sd gsdg sd gsd gsd</div>
  29.  
  30. </div>
  31.  
  32. <div id="rightcolumn">
  33. <div class="innertube"><b>Right Column: <em>190px</em></b> 3</div>
  34. </div>
  35.  
  36.  
  37. <div id="footer"><a href="http://www.dynamicdrive.com/style/">cośtam coś</a></div>
  38.  
  39.  
  40. </div>
  41. </body>
  42. </html>
[HTML] pobierz, plaintext


i do tego css
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. body{
  4. margin:0;
  5. padding:0;
  6. line-height: 1.5em;
  7. }
  8.  
  9. b{font-size: 110%;}
  10. em{color: red;}
  11.  
  12. #maincontainer{
  13. width: 840px; /*Width of main container*/
  14. margin: 0 auto; /*Center container on page*/
  15. }
  16.  
  17. #topsection{
  18. background: #EAEAEA;
  19. height: 90px; /*Height of top section*/
  20. }
  21.  
  22. #topsection h1{
  23. margin: 0;
  24. padding-top: 15px;
  25. }
  26.  
  27. #contentwrapper{
  28. float: left;
  29. width: 100%;
  30. }
  31.  
  32. #contentcolumn{
  33. margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
  34. }
  35.  
  36. #leftcolumn{
  37. float: left;
  38. width: 180px; /*Width of left column in pixel*/
  39. margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
  40. background: #C8FC98;
  41. }
  42.  
  43. #rightcolumn{
  44. float: left;
  45. width: 190px; /*Width of right column*/
  46. margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
  47. background: #FDE95E;
  48. }
  49.  
  50. #footer{
  51. clear: left;
  52. width: 100%;
  53. background: black;
  54. color: #FFF;
  55. text-align: center;
  56. padding: 4px 0;
  57. }
  58.  
  59. #footer a{
  60. color: #FFFF80;
  61. }
  62.  
  63. .innertube{
  64. margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
  65. margin-top: 0;
  66. }
  67.  
  68. </style>
[HTML] pobierz, plaintext


jak przerobić tego css-a żeby teraz na na stronie mam zrobione ze najpierw twozy sie środek porem lewa i prawa strona jak to przerobić żeby pierw tworzyć lewę i prawą stronę a na komiec środek?
webJ@cob
13.11.2007, 22:03:07
Czy o taki układ Tobie chodzi ?

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

<title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>


<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: right;
width: 190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>


</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS </h1></div></div>

<div id="contentwrapper">
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b> 2 wwwwwwwwwwwwwww w f sg sdfg sdg sd gs gsd g sdg sd sd gsd sd asdf sdg sgfd gsd sdg sd gsdg sd gsd gsd</div>
</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> 3</div>
</div>

<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> 1</div>
</div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">cośtam coś</a></div>

</div>
</body>
</html>
itson
13.11.2007, 22:26:54
dokładnie taki, dziękuje bardzo
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.