Zmena rozlisenia, zachovanie rozmiestnenia

Fórum › CSS

Codemaster 0

Návštěvník

5. 1. 2016 #1

Zdravím, chcel by som sa spýtať, ako sa dá vyriešit rozmiestnenie divov na stranke so zmenou rozlisenia. Ked stranku roztiahnem alebo prezriem na inom monitore, sirky sedia no pri margine to nieje také ruzove. Divy sa posuvaju, no chcem aby sa len menila sirka a margin left-right ale rozostavenie divov ostalo rovnaké. Dajme tomu mam div v ktorom je foto a na lavo je div v ktorom je nejaky button. no ked zmením rozlíšenie ten button lieta sem a tam. No chcel by som docielit aby sa len upravila velkost ale aby divy boli pri sebe aj pri zmene rozlíšenia.

Ďakujem za odpoveď.

Nahlásit jako SPAM

IP: 85.135.177.–

Codemaster 0

Návštěvník

5. 1. 2016 #2

Ak ste sa zamotali tak myslim aby ten vonkajší vzhad bol zachovaný či je rozlíšenie 1366x900 alebo je 1280x1024 ... alebo ake ešte existuju.

Nahlásit jako SPAM

IP: 85.135.177.–

noro

~ Anonymní uživatel
~ 25 příspěvků

5. 1. 2016 #3

Pozri si túto stránku http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Nahlásit jako SPAM

IP: 178.41.81.–

peter

~ Anonymní uživatel
~ 4016 příspěvků

5. 1. 2016 #4

Myslim, ze by bylo dobre dat sem jednoduchy testovaci kod. Kolem toho kodu muzes dat div a zmenit jeho velikost na kolik chces a ukazat, co ti to dela.
Kdyz chces neco drzet spolu, tak se to da oramovat divem a nastavit mu sirku. Nemelo by se to rozpadnout. V nejhorsim pripade bych se nebal pouzit html:table nebo css:table.

Nahlásit jako SPAM

IP: 2001:718:2601:26c:1db7:93...–

noro

~ Anonymní uživatel
~ 25 příspěvků

5. 1. 2016 #5

#4 peter
Prečo chceš nastaviť veľkosť ? prečo nenastavíš na 100percent? Stránka sa prispôsobuje veľkosti okna.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
font-family: "Lucida Sans", Verdana, sans-serif;
}

.main img {
width: 100%;
}

h1{
font-size: 1.625em;
}

h2{
font-size: 1.375em;
}

.header {
    padding: 1.0121457489878542510121457489879%;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
}

.menuitem {
    margin: 4.310344827586206896551724137931%;
    margin-left: 0;
    margin-top: 0;
    padding: 4.310344827586206896551724137931%;
    border-bottom: 1px solid #e9e9e9;
    cursor: pointer;
}

.main {
padding: 2.0661157024793388429752066115702%;
}

.right {
padding: 4.310344827586206896551724137931%;
background-color: #CDF0F6;
}

.footer {
    padding: 1.0121457489878542510121457489879%;
    text-align: center;
    background-color: #f1f1f1;
    border: 1px solid #e9e9e9;
    font-size: 0.625em;
}

.gridcontainer {
width: 100%;
}

.gridwrapper {
overflow: hidden;
}

.gridbox {
    margin-bottom: 2.0242914979757085020242914979757%;
    margin-right: 2.0242914979757085020242914979757%;
    float: left;
}

.gridheader {
width: 100%;
}

.gridmenu {
width: 23.481781376518218623481781376518%;
}

.gridmain {
width: 48.987854251012145748987854251012%;
}

.gridright {
width: 23.481781376518218623481781376518%;
margin-right: 0;
}

.gridfooter {
width: 100%;
margin-bottom: 0;
}

@media only screen and (max-width: 500px) {
    .gridmenu {
        width: 100%;
    }

    .menuitem {
        margin: 1.0121457489878542510121457489879%;
        padding: 1.0121457489878542510121457489879%;
    }

    .gridmain {
        width: 100%;
    }

    .main {
        padding: 1.0121457489878542510121457489879%;
    }

    .gridright {
        width: 100%;
    }

    .right {
        padding: 1.0121457489878542510121457489879%;
    }

    .gridbox {
        margin-right: 0;
        float: left;
    }
}

</style>
</head>
<body>
<div class="gridcontainer">
    <div class="gridwrapper">
        <div class="gridbox gridheader">
            <div class="header">
                <h1>The Pulpit Rock</h1>
            </div>
        </div>
        <div class="gridbox gridmenu">
            <div class="menuitem">The Drive</div>
            <div class="menuitem">The Walk</div>
            <div class="menuitem">The Return</div>
            <div class="menuitem">The End</div>
        </div>
        <div class="gridbox gridmain">
            <div class="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="pulpitrock.jpg" alt="Pulpit rock" width="" height="">

            </div>
        </div>
        <div class="gridbox gridright">
            <div class="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
            </div>
        </div>
        <div class="gridbox gridfooter">
            <div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Nahlásit jako SPAM

IP: 178.41.81.–

peter

~ Anonymní uživatel
~ 4016 příspěvků

5. 1. 2016 #6

noro
- S tim kodem jsem myslel codemastera, jeho kod s chybou
- Sirku, ano, ale na testovani toho kodu si to proste uzavru do divu o zadane velikosti. Pak samozrejme ten div zrusim.
Ale za ten kod te chvalim. To je taky dobre dam sem reseni nez spolehat na funkcnost vzdaleneho webu.
S temi "padding: 1.0121457489878542510121457489879%;", to ale nemaji uplne domyslene. Staci max 3-5 desetinne mista pro sirku obrazovky 10.000 px.

Nahlásit jako SPAM

IP: 2001:718:2601:26c:1db7:93...–

Codemaster 0

Návštěvník

5. 1. 2016 #7

<?php
include $_SERVER['DOCUMENT_ROOT'].'define.php';
mysql_connect("DB_HOST","DB_USER","DB_PASS");
mysql_select_db("DB_NAME");
$inzid = $_GET['inzerat'];
$s = headername($inzid);
include $_SERVER['DOCUMENT_ROOT'].'index.php';
$res = mysql_query("SELECT * FROM inzeraty WHERE id =".$inzid);
while ($inzs = mysql_fetch_array($res)) {
	
	$naz = $inzs['nazov'];
	$popis = $inzs['popis'];
	$cena = $inzs['cena'];
	$meno = $inzs['uz_meno'];
	$email = $inzs['uz_email'];
	$typ = $inzs['typ'];
	$telc = $inzs['uz_telc'];
	$dat = $inzs['dat'];
	$dir = $inzs['imgdir'];
	$typ = $inzs['typ'];

	echo "<div id = 'dispdiv'>";
		echo "<div id = 'nazov'><h2 id = 'nazh2'>".$naz."</h2><p id = 'datp'>[ ".$dat." ]</p></div>";
		echo "<a href='javascript:void(0)' onclick='toggle_visibility(`popup-box1`)'><div id = 'showinzvideo'>Zobraziť video</div></a>";
		echo "<div id = 'imgdiv'><img src = '".$dir."'></div>";
		echo "<div id 'popis'>";
			echo "<p>".$popis."</p>";
		echo "</div>";
		echo "<div id = 'udaje'>";
			echo "<b>Typ: </b>".$typ;
			echo "<br>";
			echo "<br>Meno: <b>".$meno."</b>";
			echo "<br>Email: <b>".$email."</b>";
			echo "<br>Telefón: <b>".formatTel($telc)."</b>";
		echo "</div>";
	echo "</div>";

}
function formatTel($tel) {
    // vyhadzanie neplatnych znakov z cisla
    $tel = preg_replace('/[^0-9+]/','',$tel);

    // nahrada uvodnej "00" za "+"
    $tel = preg_replace('/^00/','+',$tel);

    // ak je +421 tak moze byt 0 (narodne cislo)
    $tel = preg_replace('/^\+421/', '0', $tel);

    // 09xx - standardne mobilne cisla
    $tel = preg_replace('/(^09[0-9]{2})([0-9]{3})/','$1 $2 ',$tel);

    // 0[3,4,5,6,7] - pevne linky (okrem BA)
    $tel = preg_replace('/(^0[34567][0-9]{1})([0-9]{3})/','$1 $2 ',$tel);

    // pevne linky BA
    $tel = preg_replace('/(^0[2])([0-9]{4})/','$1 $2 ',$tel);
    return $tel;
}
?>

a tu je css

#dispdiv {
	margin-left: 25%;
	margin-right: 20%;
	width: 65%;
	position: absolute;
	font-family: sans-serif;
}
#nazh2,#datp {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 7px;
}
#datp {
	font-size: 13px;
}
#dispdiv img {
	width: 450px;
	position: inherit;
	background: center top;
	position: relative;
}
#imgdiv {
	border-color: #e3e3e3;
	border: thin;
	border-style: solid;
	width: 450px;
}
#datp {
	margin-left: 10px;
}
#nazov {
	margin-top: 10px;
	padding-left: 3%;
	background-color: #f5f5f5;
	margin-bottom: 10px;
}

pri zmene rozíšenia sa všetky divy rozhádžu a stránka už nemá taký vzhľad ako by mala mať.

Nahlásit jako SPAM

IP: 85.135.177.–

Codemaster 0

Návštěvník

5. 1. 2016 #8

alebo tu tiež, je to hl. menu.

		while ($mtabs = mysql_fetch_array($res)) {
			$nazov = $mtabs['menu_name'];
			$url = $mtabs['url'];

	$source = "pcs/".$url.".png";

				echo "<div id='polozka'>";
					echo "<table>";
						echo "<td>";
							echo "<img id = 'imdiv' src='"."/pcs/".$url.".png' width = '".resizeimg($source)[0]."px'
									style = 'margin-left: ".resizeimg($source)[1]."'>";
						echo "</td>";
							echo "<div id='infos'>";
								echo "<a href='http://".$url.".localhost'><b style='font-size:17px;'>".$nazov."</b></a>";
								echo "<br>";
								echo "<a href='#'>kateg1</a>\n";
								echo "<a href='#'>kateg2</a>";
			echo "</div></table></div>";
		}
}
	echo "</div>";
?>

@import url(https://fonts.googleapis.com/css?…);
#alldiv {
	font-family: 'Open Sans', sans-serif;
	margin-top: 30px;
	margin-left: 4%;
	margin-bottom: 30px;
}
#polozka {
	width: 300px;
	height: 85px;
	display: inline-block;
	margin-left: 2%;
	border: thin;
	border-style: solid;
	border-color: #FFF;
	transition: border-color .3s ease-in;
	-moz-transition: border-color .3s ease-in;
	-webkit-transition: border-color .3s ease-in;
	-o-transition: border-color .3s ease-in;	
}
#polozka:hover {
	border:thin;
	border-style: solid;
	border-color: #000;
    /*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */
    /*filter: gray; /* IE6-9 */
    /*-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    /*-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    /*-webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
#polozka img {
	float: left;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.7em;
	height: 56px;
	display: block;
}
#infos {
	float: right;
	margin-right: 0;
	height: 100%;
	width: 60%;
}
#infos a {
	margin-top: 6px;
	display: inline-block;
	font-size: 12px;
	text-decoration: none;
	color: #565656;
}
#infos a:hover{
	color: black;
	text-decoration: underline;
}

Nahlásit jako SPAM

IP: 85.135.177.–

peter

~ Anonymní uživatel
~ 4016 příspěvků

6. 1. 2016 #9

Ja ti nechci kazit radost, ale chces resit css problem. Tudiz potrebujes k tomu css a html. Co to php, jako? Myslis, ze mame tvoji db a dalsi veci? Jen se pekne zkus podivat do prohlizece a najdi tam tlacitko zobrazit-zdrojovy-kod.

Nahlásit jako SPAM

IP: 2001:718:2601:26c:94fb:c5...–

Codemaster 0

Návštěvník

6. 1. 2016 #10

Uz som to vyriesil ... treba ponastavovat margin: auto; a pre divy v ktorych sa nieco zobrazuje treba dat pevnu sirku ... aj tak dik a Peter, sorry, na buduce budem vediet.

Nahlásit jako SPAM

IP: 5.178.55.–

← Zpět na seznam vláken ← Zpět do Fóra