Zmena rozlisenia, zachovanie rozmiestnenia – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Zmena rozlisenia, zachovanie rozmiestnenia – CSS – Fórum – Programujte.comZmena rozlisenia, zachovanie rozmiestnenia – CSS – Fórum – Programujte.com

 

Codemaster0
Návštěvník
5. 1. 2016   #1
-
0
-

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.–
Codemaster0
Návštěvník
5. 1. 2016   #2
-
0
-

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
-
0
-

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
4014 příspěvků
5. 1. 2016   #4
-
0
-

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
-
0
-

#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
4014 příspěvků
5. 1. 2016   #6
-
0
-

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...–
Codemaster0
Návštěvník
5. 1. 2016   #7
-
0
-

   

<?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.–
Codemaster0
Návštěvník
5. 1. 2016   #8
-
0
-

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
4014 příspěvků
6. 1. 2016   #9
-
0
-

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...–
Codemaster0
Návštěvník
6. 1. 2016   #10
-
0
-

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.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 3 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý