Jump to content

Probleme Afisare Continut Div-Uri Pe Aceeasi Linie


CaTa CaTa

Recommended Posts

Salut am facut si eu un index dar am o problema nu imi arata content la linie cu tops am facut asa

Poza -> 

545791ea4cb5d.png

 

HTML -> 

<div class="tops">
		   <b><center><font color="white">Update</font></center></b>
</div>
<br>
		<div class="content">
		   <b><center><font color="white">Update</font></center></b>
		</div>
</br>

CSS -> 

.content { 
	background: url("../images/info_box.png") transparent;
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin: 10px;
	padding: 10px;
	clear: both;
	width: 800px;
	height: autopx;
	float: left;
}
.tops { 
	background: url("../images/info_box.png") transparent;
	/*border-radius: 10px;
	float: left;
	margin-top: 15px;
	min-height: autopx;
	padding: 10px;
	width: 300px;*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	width: 285px;
	float: right;
	margin: 10px;
	padding: 10px;
	clear: both;
}

help?

Link to comment
Share on other sites

  • Moderators

Nu iti arata pe aceasi rand pentru ca stergi floatu cu clear la aceasi clasa, trebuie sters la un element de mai sus.

 

Va trebuie sa adaugi tot acel continut in alt div, un exemplu si ceva ce eu cred personal ca e mai bine gandit ar fi urmator-ul:

<div class="main">
     <div class="content">
          <h1>Content</h1>
     </div>

     <div class="sidebar">
          <h1>Sidebar</h1>
     </div>
</div>

Si CSS-ul:

        .main {
            overflow: hidden;
        }
        .content {
            width: 68%;
            float: left;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background-color: #000;
            box-sizing: border-box;
            margin-right: 2%;
            padding: 10px;
        }
        .sidebar {
            width: 30%;
            float: right;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            background-color: #000;
            box-sizing: border-box;
            padding: 10px;
        }

Dupa cum observi, am evitat "clear" la clasa main, poti schimba overflow-ul cu clear: both; daca chiar vrei, dar diferenta nu va fi, lumea incepe sa lucreze cat mai mult cu overflow.

 

Box-sizingu: border-box; este pentru a evita ca paddingu sa se extinda in exterior, adica sa nu mareasca continutu, ci sa reduca din inaltime si latime si sa adauge paddingu pentru a nu depasi width-ul de 68%.

Pentru a da un spatiu in lateral am folosit margin-right: 2%; si cum bine observi am redus de la 70% latime la 68% pentru a evita sa sara pe urmator-ul rand. Daca vrei sa faci asta in pixeli, va trebui sa lucrezi cu tot site-ul in pixeli, in cazu meu, asta este body-ul:

        body {
            width: 80%;
            max-width: 960px;
            margin: 0 auto;
        }

Nu imi prea place sa lucrez cu pixeli, pentru un design responsiv nu e ce-a mai buna metoda sa te pui si sa calculezi pixeli pentru fiecare rezolutie.

 

 

Sperca am rezolvat problema care vroiai sa afli.

  • Upvote 2

PHP Developer - Not available for freelancing right now

Daca ai de gand sa postezi la categoria IPB, nu uita sa citesti regulamentul: Link regulament

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.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.