Trenger litt csshjelp

FlowerEye · 26. januar 2009

Jeg trenger litt basis hjelp nå jeg. Har prøvd å få det til selv, men klusser bare til. Mulig jeg bare er litt trøtt, men jeg får det i alle fall ikke til.

Sånn blir det nå:

Sånn vil jeg ha det:

Her er litt av css'en:

.koder{
font-size:12px;
margin-top:10px;
padding: 10px;
background: #dbe7f9;
border: 1px solid #b7cee8;
}

FlowerEye · 26. januar 2009

Css snutten er foressten fra det nåværende oppsettet. Da går bare boksene over hele siden, og under hverandre. Ikke ved siden av hverandre sånn jeg vil ha dem.

Skoen · 27. januar 2009

Det ville vært enklere for oss å se kildekoden til begge deler. Vi har ingen forbindelse til den CSS-snutten du har limt inn for oss her.

Det som er lurt, er nok å lage egne div-ider til hver av boksene, og bruke float: left; på den som skal være left. Det er også lurt å da velge inn marginer, paddinger og størrelse på boksene.

FlowerEye · 27. januar 2009

Kildekoden:

 print "<div class=\"koder\">\n";
			$HentBrukerLaLaLa = mysql_query("SELECT * FROM dyr_brukere WHERE id = '" . $_GET['bruker'] . "'");
	$Intel = mysql_fetch_array($HentBrukerLaLaLa);
 if($Intel["eiendom"] == "1")
	{
	echo "" . htmlentities($hent['navn']) . " bor i en leilighet. I leiligheten kan " . htmlentities($hent['navn']) . " ha kaniner, fugler, fisker og gnagere. Maks 5 dyr.";
	}
	elseif($Intel["eiendom"] == "2")
	{
	echo "" . htmlentities($hent['navn']) . " bor i et hus. I huset kan " . htmlentities($hent['navn']) . " ha hunder, katter, kaniner, fugler, fisker og gnagere. Maks 15 dyr.";
	}
	elseif($Intel["eiendom"] == "3")
	{
	echo "" . htmlentities($hent['navn']) . " bor på en gård. På gården kan " . htmlentities($hent['navn']) . " ha alle dyr. Og så mange han/hun vil.";
	}
			print "</div><br>";
			if($hent['sistaktiv'] > $femmin) {
				$sistinnlogget = "Er innlogget nå";
			}
			else {
			if($hent['sistaktiv'] == "0")
				{
				$sistinnlogget = "Aldri vært innlogget";
				}
				else
				{
				$sistinnlogget = date("d.m.Y \k\l H.i", $hent['sistaktiv']);
				}
			}
			print "<div class=\"koder\">\n";
			print "<strong> " . htmlentities($hent['navn']) . " var sist innlogget:</strong> " . $sistinnlogget . "<br />\n";
			print "<br /><strong>Advarselsnivå (" . $Intel["warn"] . "%): Kommer snart! </strong>";
			print "<br />\n";

			print "</div><br>\n";

			 print "<div class=\"bprofil\">\n";
			 print "<center>";
			 print "<a href=\"#gjestebok\"><span>Skriv i gjestebok |</span></a>\n";
			 print "<a href=\"pm.php?skriv=" . $_GET['bruker'] . "\"><span>Send PM |</span></a>\n";
			 print "<a href=\"bruker_sok.php?addfriend=" . $_GET['bruker'] . "\"><span>Bli venn med</span></a>\n";
			 print "</center>";
			 print "</div>";

FlowerEye · 27. januar 2009

Må kanskje legge ut litt mer css?

Skoen · 27. januar 2009

Jeg tror jeg allerede ser hvor feilen ligger. Du bruker samme classnavn på alle boksene dine. Det er feil når du egentlig skal ha tre forskjellige bokser.

Lag en class i CSS for alle de ulike boksene. Du skal kun ha samme class på bokser som ser helt like ut, i ditt eksempel skal du ha tre forskjellige bokser: En stor nederst, en liten øverst til venstre og en liten øverst til høyre.

Jeg ville også gitt boksene litt mer passende navn. Du kan f.eks. kalle den store boksen for: innleggknapper.

Den lille til venstre for: infoboks, og den lille til høyre for: innlegg.

FlowerEye · 27. januar 2009

Satt det opp sånn nå:

print "<div class=\"infoboksHøyre\">\n";
			$HentBrukerLaLaLa = mysql_query("SELECT * FROM dyr_brukere WHERE id = '" . $_GET['bruker'] . "'");
	$Intel = mysql_fetch_array($HentBrukerLaLaLa);
 if($Intel["eiendom"] == "1")
	{
	echo "" . htmlentities($hent['navn']) . " bor i en leilighet. I leiligheten kan " . htmlentities($hent['navn']) . " ha kaniner, fugler, fisker og gnagere. Maks 5 dyr.";
	}
	elseif($Intel["eiendom"] == "2")
	{
	echo "" . htmlentities($hent['navn']) . " bor i et hus. I huset kan " . htmlentities($hent['navn']) . " ha hunder, katter, kaniner, fugler, fisker og gnagere. Maks 15 dyr.";
	}
	elseif($Intel["eiendom"] == "3")
	{
	echo "" . htmlentities($hent['navn']) . " bor på en gård. På gården kan " . htmlentities($hent['navn']) . " ha alle dyr. Og så mange han/hun vil.";
	}
			print "</div><br>";
			if($hent['sistaktiv'] > $femmin) {
				$sistinnlogget = "Er innlogget nå";
			}
			else {
			if($hent['sistaktiv'] == "0")
				{
				$sistinnlogget = "Aldri vært innlogget";
				}
				else
				{
				$sistinnlogget = date("d.m.Y \k\l H.i", $hent['sistaktiv']);
				}
			}
			print "<div class=\"infoboksVenstre\">\n";
			print "<strong> " . htmlentities($hent['navn']) . " var sist innlogget:</strong> " . $sistinnlogget . "<br />\n";
			print "<br /><strong>Advarselsnivå (" . $Intel["warn"] . "%): Kommer snart! </strong>";
			print "<br />\n";

			print "</div><br>\n";

			 print "<div class=\"profilknapper\">\n";
			 print "<center>";
			 print "<a href=\"#gjestebok\"><span>Skriv i gjestebok |</span></a>\n";
			 print "<a href=\"pm.php?skriv=" . $_GET['bruker'] . "\"><span>Send PM |</span></a>\n";
			 print "<a href=\"bruker_sok.php?addfriend=" . $_GET['bruker'] . "\"><span>Bli venn med</span></a>\n";
			 print "</center>";
			 print "</div>";

.infoboksVenstre{
font-size:12px;
margin-top:10px;
float: left;
padding: 10px;
background: #dbe7f9;
border: 1px solid #b7cee8;
}

.infoboksHøyre{
font-size:12px;
margin-top:10px;
float: right;
padding: 10px;
background: #dbe7f9;
border: 1px solid #b7cee8;
}

.profilknapper{
font-size:16px;
margin-top:10px;
  padding: 10px;
  background: #dbe7f9;
  border: 1px solid #b7cee8;
}

Og da ble det sånn:

Endret 27. januar 2009 av FlowerEye

FlowerEye · 27. januar 2009

Jeg tok meg selv litt i nakkeskinnet og satt opp noe nytt, som faktisk fungerer MEN, jeg trenger fortsatt hjelp.

Sånn er det satt opp nå:

   print "<div id=\"hoyre\">\n";
			$HentBrukerLaLaLa = mysql_query("SELECT * FROM dyr_brukere WHERE id = '" . $_GET['bruker'] . "'");
	$Intel = mysql_fetch_array($HentBrukerLaLaLa);
 if($Intel["eiendom"] == "1")
	{
	echo "" . htmlentities($hent['navn']) . " bor i en leilighet. I leiligheten kan " . htmlentities($hent['navn']) . " ha kaniner, fugler, fisker og gnagere. Maks 5 dyr.";
	}
	elseif($Intel["eiendom"] == "2")
	{
	echo "" . htmlentities($hent['navn']) . " bor i et hus. I huset kan " . htmlentities($hent['navn']) . " ha hunder, katter, kaniner, fugler, fisker og gnagere. Maks 15 dyr.";
	}
	elseif($Intel["eiendom"] == "3")
	{
	echo "" . htmlentities($hent['navn']) . " bor på en gård. På gården kan " . htmlentities($hent['navn']) . " ha alle dyr. Og så mange han/hun vil.";
	}
			print "</div>";
			if($hent['sistaktiv'] > $femmin) {
				$sistinnlogget = "Er innlogget nå";
			}
			else {
			if($hent['sistaktiv'] == "0")
				{
				$sistinnlogget = "Aldri vært innlogget";
				}
				else
				{
				$sistinnlogget = date("d.m.Y \k\l H.i", $hent['sistaktiv']);
				}
			}
			print "<div id=\"venstre\">\n";
			print "<strong> " . htmlentities($hent['navn']) . " var sist innlogget:</strong> " . $sistinnlogget . "<br />\n";
			print "<br /><strong>Advarselsnivå (" . $Intel["warn"] . "%): Kommer snart! </strong>";
			print "<br />\n";

			print "</div><br><br><br><br><br>\n";

			 print "<div class=\"profilknapper\">\n";
			 print "<center>";
			 print "<a href=\"#gjestebok\"><span>Skriv i gjestebok |</span></a>\n";
			 print "<a href=\"pm.php?skriv=" . $_GET['bruker'] . "\"><span>Send PM |</span></a>\n";
			 print "<a href=\"bruker_sok.php?addfriend=" . $_GET['bruker'] . "\"><span>Bli venn med</span></a>\n";
			 print "</center>";
			 print "</div>";

CSS:

div#venstre {
width: 250px;
float: left;
background: #dbe7f9;
border: 1px solid #b7cee8;
}

div#hoyre {
width: 250px;
float: right;
background: #dbe7f9;
border: 1px solid #b7cee8;
}

.profilknapper{
font-size:16px;
margin-top:10px;
  padding: 10px;
  background: #dbe7f9;
  border: 1px solid #b7cee8;
}

Sånn ser det ut i Opera:

Men det må da finnes enklere måter å gjøre det på? Som dere ser så har jeg brukt masse break tagger (<br>) for ellers så overlapper de to boksene den nederste.

En ting til. Nå er det sånn at innholdet av boksene avgjør lengde, er det mulig å få dem like lange uavhengig av innhold uten å måtte spesifisere høyde? Oi, ble litt rotete dette

Skoen · 27. januar 2009

Her må du kunne bruke flere marginer. Det er fullt mulig å bruke margin-left og margin-right i tillegg.

Det er også greit å lage gjerne en egen div der du samler de to boksene, og gjerne spesifiser høyden på den.

Så spesifiserer du høyden på profilknapper.

Det er ikke nødvendig å sette div# foran IDen. Bruk bare #, så vil nettleseren selv lese utifra html-koden din om det er en div eller en p eller noe annet. # er ID, . er class.

Jeg ville gjerne hatt noe sånt som dette:

<div id="inlegg">
<div id="venstre">blablabla</div>
<div id="hoyre">blablabla</div>
</div>

<div id="profilknapper">
<p class="profilknappertekst">Skriv i gjestebok | Send PM | Bli venn med</p>
</div>

Asterisk · 31. januar 2009

For å unngå overflødig bruk av <br/> vil jeg foreslå at du avslutter float. Når du bruker float tillater du elementer, som i hovedsak er av typen block-element til å komme ved siden av hverandre. (Hvis jeg ikke tar helt feil nå).

Bytt ut denne:

print "</div><br><br><br><br><br>\n";

Med dette:

print "</div>";

print "<div style=\"clear:both\"></div>";

Nå vet jeg ikke helt hvordan du kan få to div-elementer til å ha samme høyde uavhengig av innhold. Men jeg vet hvordan du kan begynne med samme høyde. Det vil si at du kan starte med eksempelvis 50px i høyde for begge elementer:

height: auto !important;

min-height: 50px;

height: 50px;

Dette legges til i begge venstre og høyre div-element.

Matsemann · 31. januar 2009

En ting til. Nå er det sånn at innholdet av boksene avgjør lengde, er det mulig å få dem like lange uavhengig av innhold uten å måtte spesifisere høyde? Oi, ble litt rotete dette

Faux Columns kan nok hjelpe deg.

Det er mye lettere om du gir oss ren HTML-kode uten all PHP-en. Altså bare HTML-en som du ser når siden er lastet.

Logg inn

Trenger litt csshjelp

Anbefalte innlegg

FlowerEye

Lenke til kommentar

Videoannonse

FlowerEye

Lenke til kommentar

Skoen

Lenke til kommentar

FlowerEye

Lenke til kommentar

FlowerEye

Lenke til kommentar

Skoen

Lenke til kommentar

FlowerEye

Lenke til kommentar

FlowerEye

Lenke til kommentar

Skoen

Lenke til kommentar

Asterisk

Lenke til kommentar

Matsemann

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Presidentvalget i USA 2024 1 2 3 4 571

Hvem er aktive 0 medlemmer