Jump to content
php.lv forumi

Centrēt lapas saturu - atstāt lapas fona bildes


nezinis
 Share

Recommended Posts

Es cenšos izveidot lapu, kuras viss saturs ir centrēts, bet fona bildes ( vairākas - lapa dalīta vairākās daļās ) ir pa visu lapu.

Piemērs (Saturs ir brūnajā rāmī) : http://www.bildites.lv/images/ja530h1m07zl4uv6zre.png

 

Esmu izveidojis wrapperi,kuru es izmantoju atsevišķām lapas daļām(logo, footer un teksts)  ar šādu css:

 

.wrapper {
      margin: 0 auto;
      width: 950px;
}

 

bet, ja es to daru šādi, tad samazinot brauzeri,  lapa saiet sviestā ( daļa no labās puses ir nogriezta).

 

1. Ko, lai izdara, lai lapa nemainītu savu izskatu samazinot brauzeri?

2. Kāds būtu labākais veids kā izmantot wrapperi saturam, lai man viņš nebūtu jāizmanto vairākas reizes lapas satura centrēšanai?

Edited by nezinis
Link to comment
Share on other sites

Vai tos background attēlus nevarētu uztaisīt kā vienu 1px wide (un, iespējams, ļoti augstu) attēlu un uzlikt kā body background ar repeat-x?

Jeb tev tie augstumi starp tām joslām ir svarīgi/mainīgi?

 

Tev HTML struktūra ir kaut kāda šāda?

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>
Link to comment
Share on other sites

 

Vai tos background attēlus nevarētu uztaisīt kā vienu 1px wide (un, iespējams, ļoti augstu) attēlu un uzlikt kā body background ar repeat-x?

Jeb tev tie augstumi starp tām joslām ir svarīgi/mainīgi?

 

Tev HTML struktūra ir kaut kāda šāda?

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

1. Augstumi mainīsies - nevar

2. Pagaidām šādi, jo nevarēju neko citu izdomāt

 

 
<body>

    <div class=header>
       <div class=wrapper>
        <div class="logo">
                logo, kuram jabut centreetam
        </div>
      </div>
    </div>

</body>
Link to comment
Share on other sites

#header{
	width: 100%;
	background: #ececec;
}
.wrapper {
	margin: 0 auto;
	width: 960px;
	background: #000;
	color: #fff;
}

<body>
<div id="header">
	<div class="wrapper">teksts</div>
</div>
</body>

Manuprāt šitā arī visas sadaļas tev jātaisa. Pēc šitāda principa.

Link to comment
Share on other sites

Tad mainot brauzera izmēru, lapas labā puse pazūd.

 

Rekur piemērs, kurā samazinot brauzeri, labā puse pazūd ( netiek strechots? )

 

 

<html>
<head>
    <style>
        body{
            background: blue;
        }

        .wrap{
            margin: 0 auto;
            width: 950px;
        }

        .header{
            height: 100px;
            width: 100%;
            background: green;
        }
    </style>

</head>
<body>

<div class=header>
    <div class=wrap>
        asd
    </div>
</div>


</body>
</html>
Edited by nezinis
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...