CSS overser HTML tagger uten grunn

MaxP2P · 4. mai 2007

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>The Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles/master.css" />

</head>

<?

// INCLUDES
include ("config.php");
include ("functions.php");

/* -=( DB Connections and Queries )=- */

$dbcon = mysql_connect ($server, $db_user, $db_pass) or die ("Connection to the database could not be established...<br /><b>MySQL Returns:</b> " . mysql_error());
mysql_select_db ($db, $dbcon) or die ("Could not select the requested database...<br /><b>MySQL Returns:</b> " . mysql_error());

$query = "SELECT * FROM pubnews";
$result = mysql_query ($query, $dbcon) or die ("Could not execute the query: $query<br /><b>MySQL Returns:</b> " . mysql_error());

mysql_close ($dbcon);

?>

<?

/* -=( DB Data Extraction )=- */

$rowcount = mysql_num_rows ($result);
$rowdata = mysql_fetch_object ($result);

?>

<body>

<center>
<div id="gpc">
<div id="banner"></div>
<div id="cont_top"></div>
<div id="cont_main">
<h1>Her er feil'en, hvorfor?</h1>
 	<? echo "$rowdata->title" ?>
 	<br />
 	<br />
 	<? echo "$rowdata->acontent" ?>
 	<br />
 	<br />
 	<? echo "$rowdata->author" ?>
</div>
<div id="cont_bottom"></div>
<div id="footer"></div>	
</div>
</center>

</body>
</html>

CSS

/* The Sandbox */

/* -=(Browser override)=- */
* {
margin: 0;
padding: 0;
background: #082F38;
}

/* -=(Global Page Control)=- */
#gpc {
width: 934px;
}

/* -=(Banner Control)=- */
#banner {
background: url("../images/banner.png") no-repeat;
height: 135px;
}

/* -=(Content Box Control)=- */
#cont_top {
background: url("../images/cont_top.png") no-repeat;
height: 70px;
}

#cont_main {
background: url("../images/cont_mainr.png") repeat-y;
}

#cont_bottom {
background: url("../images/cont_bottom.png") no-repeat;
height: 55px;
}

/* -=(Footer Control)=- */
#footer {
background: url("../images/footer.png") no-repeat;
height: 70px;
}

Endret 4. mai 2007 av MaxP2P

eigan · 4. mai 2007

Prøv å sett border: 1px solid #fff; på noen av elementene for å se hvordan dem flyter rundt.

Det kan hende cont_top bilde er for lite i forhold til str på diven.

BTW: sett teksten din inn i "tagger" tittelen kan være inni en <h3> og tekst i <p>

Du trenger ikke bruke <center>, med sett margin: 0px auto; i #gpc

MaxP2P · 4. mai 2007

Takk for hjelpen, men jeg ga en eldre kode enn det, det var tatt bildet av. Kunne du se over den igjen?

Jeg mener at feil'en ligger i det at hvis jeg putter inn hvilken som helst tag inn i <div id="cont_main">, så blir det oversett og nestingen feiler. Den nye taggen kommer liksom i sin egen verden...

Kunne du utdype det du skrev i tykt skrift? ^^

Nå puttet jeg borders på alle div'ene.

Ser jo riktig ut. "Her er feil'en, hvorfor?" og "omg" er i samme div sånn som de skal være. Hvorfor overser CSS/HTML det?

MaxP2P · 7. mai 2007

*BUMP*

7. mai 2007

Det er browser override'en din som gjøre det. Regner med * betyr bruk denne der ikke har noe annet er definert, eller noe slikt.

Så du kan gi h1 taggen en id eller class + style eller du kan bytte ut * med body...

Endre

Wattengård · 7. mai 2007

Bytt ut * med "html, body".

Prøv å lag en h1 css stil som har samme bilde som div'en.. Snodig feil, har du prøvd i alle browsere?

-C-

Nitrius · 8. mai 2007

Prøvde først å gjøre om * til "html, body" som dere sa, da fikk vi grafikk bak teksten, men mellomrommet flyttet seg over.

Når jeg definerte f.eks h1 i .css å satt inn samme bilde som i div'en så ble alt slik det skal se ut. Men vil si dette er en tungvin måte, hvis vi må definere alle klassene med samme bilde som i div'ene.

Så hvis noen skulle ha andre løsninger så sier vi ja takk til det også, takk for all hjelpen så langt vertfall =)

Slik ser .CSS koden ut nå:

/* The Sandbox */

/* -=(Browser override)=- */
html, body {
margin: 0;
padding: 0;
background: #082F38;
}

/* -=(Global Page Control)=- */
#gpc {
margin: 0px auto;
width: 934px;
}

/* -=(Banner Control)=- */
#banner {
background: url("../images/banner.png") no-repeat;
height: 135px;
}

/* -=(Content Box Control)=- */
#cont_top {
background: url("../images/cont_top.png") no-repeat;
height: 70px;
}

#cont_main {
background: url("../images/cont_mainr.png") repeat-y;
}

#cont_bottom {
background: url("../images/cont_bottom.png") no-repeat;
height: 55px;
}

/* -=(Footer Control)=- */
#footer {
background: url("../images/footer.png") no-repeat;
height: 70px;
}

/* TEST */
.h1 {
background: url("../images/cont_mainr.png") repeat-y;
font-size: 50pt;
}

(btw, jeg og maxp2p jobber sammen på samme prosjekt, hvis noen lurte)

Endret 8. mai 2007 av Nitrius

Wattengård · 8. mai 2007

For det første så skal det være bare h1... Ikke .h1. Da må du gi h1-taggen i dokumentet klassen H1 og det blir feil.

Jeg vil tro at årsaken har noe med at H1 er et blokk-element.

-C-

Nitrius · 8. mai 2007

For det første så skal det være bare h1... Ikke .h1. Da må du gi h1-taggen i dokumentet klassen H1 og det blir feil.

Jeg vil tro at årsaken har noe med at H1 er et blokk-element.

-C-

8563121[/snapback]

Mulig, men nå er det slik uansett hva vi bruker, eller når det bare er plain tekst, som ikke er gjort noe med, så fungerer det fint.

Uansett så fungere det slik det ble sagt her, ved å putte bilde inni i hver klasse vi definerer i .css, men vi er åpne for andre forslag, så bare si ifra.

Edit: Når jeg fjerner . foran .test f.eks, så blir alt øddelagt igjen, altså ting brytes opp...

<h1 class="test">Halla dette er tøft</h1>
<br />
<br />
<h2 class="test">Dette er h2</h2>
<br />
<p class="test2">Hei hei, Vi tester og tester, fungere det mon tro?</p>

/* TEST */
.test {
background: url("../images/cont_mainr.png") repeat-y;
font-size: 20pt;
color: #FFF
}

.test2 {
background: url("../images/cont_mainr.png") repeat-y;
font-size: 40pt;
color: red;
}

Endret 8. mai 2007 av Nitrius

Wattengård · 8. mai 2007

Tror du bør lese litt mer om CSS.

h1 - stiler taggen

.h1 - stiler klassen "h1"

#h1 - stiler IDen "h1"

Derfor vil ikke "test" funke, det er ingen tag som heter "test". ".test" vil derimot stile alle tagger med klassen "test".

-C-

MaxP2P · 8. mai 2007

Tror du bør lese litt mer om CSS.

h1 - stiler taggen

.h1 - stiler klassen "h1"

#h1 - stiler IDen "h1"

Derfor vil ikke "test" funke, det er ingen tag som heter "test". ".test" vil derimot stile alle tagger med klassen "test".

-C-

8563482[/snapback]

Tanken var da at vi skulle lage en felles klasse for alle tag'ene som eventuelt måtte bli fikset.

Det som nitrius posta over fungerer jo så jeg skjønner ikke helt hva du prøver å si.

Uansett takk for all hjelp så langt.

Wattengård · 8. mai 2007

Edit: Når jeg fjerner . foran .test f.eks, så blir alt øddelagt igjen, altså ting brytes opp...

Det jeg prøver å si er at hvis han/dere hadde kunnet CSS så hadde dere visst at å fjerne dåtten foran test vil selvfølgelig gi feil siden da er det ikke lenger en CSS-klasse. Men stiling av taggen som heter "test". Men det er ingen (X)HTML tag som heter "test. Derfor blir det bare dumt og feil.

-C-

Logg inn

CSS overser HTML tagger uten grunn

Anbefalte innlegg

MaxP2P

Lenke til kommentar

Videoannonse

eigan

Lenke til kommentar

MaxP2P

Lenke til kommentar

MaxP2P

Lenke til kommentar

Gjest Slettet-mRjwtK9u

Lenke til kommentar

Wattengård

Lenke til kommentar

Nitrius

Lenke til kommentar

Wattengård

Lenke til kommentar

Nitrius

Lenke til kommentar

Wattengård

Lenke til kommentar

MaxP2P

Lenke til kommentar

Wattengård

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Trump 2025 1 2 3 4 140

Darwin er død men Jesus lever 1 2 3 4 44

Hvem er aktive 0 medlemmer