Div inside div + css

s1gh · 2. februar 2009

Det har nå oppstått et "stort" problem med css- og html-kodene mine.

Jeg prøver å lage en boks der jeg kan vises f.eks. php-kode. Denne boksen blir så stylet med CSS, før den blir inkludert i bloggen med <div class="example">PHP-kode</div>.

Det er her problemet oppstår. Når jeg bruker f.eks. <div class="example"> inni en annen <div> virker det som om <div class="example"> "tar over" stylingen på nesten hele hjemmesiden.

Herregud, dette ble vanskeligere å forklare, enn først antatt.

Her er bloggen uten "kode-boksen": http://bildr.no/view/337600

- "Kode-boksen" skal altså inkluderes etter: ...look at a working program:

Her er bloggen MED "kode-boksen": http://bildr.no/view/337602

- Hvis dere ser nøye etter, er det skrift under "kode-boksen".

Så altså, det som er er problemet er at "kode-boksen" og evt. etterfølgende tekst rendres utenfor "hovedsiden" (markert med border).

Inkluderer også diverse CSS-filer

Main.css:

* { padding: 0; margin: 0; }

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000;
background: url(../images/background/main_background.png);
}
#wrapper { 
margin: 0 auto;
width: 974px;
border: 1px solid;
margin-top: -1%;
overflow: hidden;
}
#faux {
background: url(../images/menu/menu.png);
margin-bottom: 0px;
overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
width: 100%
}
#header {
color: #333;
background: url(../images/banner/banner.png) no-repeat;
width: 100%;
padding: 10px;
height: 100px;
margin: 10px 0px 0px 0px;
}
#rightcolumn { 
display: inline;
color: #FFF;
margin: 10px;
overflow: visible;
margin-top: 20px;
padding: 0px;
width: 240px;
float: right;
}
#leftcolumn { 
float: left;
/*border: 1px solid red;*/
margin: 26px;

color: #DDD;
width: 657px;
margin-top: 35px;
display: inline;
position: relative;
}
#footer { 
width: 954px;
clear: both;
color: #333;
background: #ABBEBE;
margin: 0px 0px 0px 0px;
padding: 10px;
}
.clear 
{ 
clear: both; 
background: none; 
}
p.small 
{
line-height: 180%
}
h2.title {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #01537c;
margin-bottom: 10px;

}
img.post 
{
margin-left: 5px;
}
img.titleImg
{
margin-top: 5px;
margin-left: -5px;
}
.blogContentMain
{
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
line-height: 140%;
margin-bottom: 30px;
padding-top: 3%;
border: 1px solid;
}
.blogContentPerma
{
font-family: Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
line-height: 140%;
padding-top: 3%;
}
hr.lineTitle
{
height: 2px;
color: #122c41;
background-color: #122c41;
border: #122c41;

}
.postInfo
{
margin-top: -8px;
font-family: Verdana;
color: #000;
font-size: 11px;
}
img.blogImage{border:1}
.blogImage {border:1px solid #000}

Stilsett for "kode-boks":

.code
{
padding-top: 7px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
width: 400px; 
height: 100px;
font-family: Verdana; 
Font-size: 10px; 
background-color: #fafad2; 
color: #000; 
white-space: default;  
overflow: visible; 
border: 1px; 
border-style:dashed;
}

Håper noen ser hva jeg har gjort galt, sånn at jeg får fikset dette problemet en gang for alle! :-)

//s1gh

Endret 2. februar 2009 av Sigh

Asterisk · 2. februar 2009

Kan du legge ved html-koden også? Litt greitt å se hvordan du implementerer css-koden.

s1gh · 2. februar 2009

Her er index-fila:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Utkast til Blogg #2</title>

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="/css/main.css" />

<!-- Javascript -->
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
</head>
<body>

  <!-- Start Wrapper -->
  <div id="wrapper">

	 <!-- Start Header -->
	 <div id="header"><div style="border-bottom: dashed 1px #DDD; float: left; color: #FFF; margin-left: 15%; margin-top: 2%; font-family: Arial; font-size: 28px;"><a class="banner" href="http://www.example.com">Utkast #2</a></div><div style="float: right; margin-right:7%;margin-top: 1%;"><a href="/feed/" onMouseOver="document.rss0.src='/images/rss/rss1.png';" onMouseOut="document.rss0.src='/images/rss/rss0.png';"><img src="/images/rss/rss0.png" border="0" name="rss0" alt="rss0" title="Rss Feed!"></a></div></div>
	 <!-- End Header -->

	 <!-- Faux Columns -->
	 <div id="faux">

		   <!-- Start Left Column -->
		   <div id="leftcolumn">
		<?php include('inc/mainInclude.php'); ?>
		   <div class="clear"></div>

		   </div>
		   <!-- End Left Column -->

		   <!-- Begin Right Column -->
		   <div id="rightcolumn">

		   <!-- Categories -->
	 <div class="categories"><?php include('core/categories.php'); ?></div>

		   <!-- Tags -->
	 <div class="tags"><?php include('inc/tags.php'); ?></div>



	 <!--Search -->
	 <div class="search">
<form action="index.php?page=search" method="POST">
<input class="search_input" size="20" type="text" NAME="search">
<class="submit"><input class="submit_input" type="submit" value=" Find! ">
</form>
</div>

	 <!-- Archive -->
	 <div class="archive"><?php include('core/archives.php'); ?></div>

			  <div class="clear"></div>

		   </div>
		   <!-- End Right Column -->

	 </div>	   
	 <!-- End Faux Columns --> 


	 <!-- Footer -->
	 <div id="footer">

		   Denne må designes ferdig!!! NB NB NB 	

	 </div>
	 <!-- End Footer -->


  </div>
  <!-- End Wrapper -->

</body>
</html>

Endret 2. februar 2009 av Sigh

Asterisk · 2. februar 2009

Index-dokumentet din forteller meg egentlig ikke noenting. Hvis du hadde lagt ved html-koden (det dokumentet) hvor du implementere css-koden (.code) ville det vært enklere å kunne sett hva som kan være feil. Css-koden i seg selv sier ikke mye, men css-koden i samsvar med hvordan du implementerer koden i html-dokumentet vil derimot kunne fortelle mye mer.

Jeg kan ikke se bruk av .code i selve index-dokumentet, og jeg er derfor like lost som jeg var for 20 min siden.

s1gh · 2. februar 2009

Ah, beklager.

Teksten under er lagret i en database, og blir hentet ut ved hjelp av php.

...effectively take everything in the header and paste it into your program. Let's look at a working program:<div class="code">#include <iostream>

using namespace std;

int main()
{
 cout<<"HEY, you, I'm alive! Oh, and Hello World!\n";
 cin.get();

 return 1;
}
</div>

Let's look at the elements of the program. The #include is a "preprocessor" directive that tells the compiler to put code from the header called iostream into our program before actually creating the executable. By including...

Asterisk · 2. februar 2009

Ikke noe å beklage over

Koden jeg er ute etter er dette:

- css-koden (den har du lagt ved)

- html-koden, som viser hvordan du har implementert css-koden. Da mener jeg at jeg vil se hvordan alt henger sammen, med implementering av div-elementet som omslutter kodeboksen, samt hvordan du har implementert selve kodeboksen.

Men jeg kan prøve å hjelpe deg allikevel. Ved første øyekast av de bildene du har linket til i første innlegg ser det til at div-elementet som skal omslutte kodeboksen blir avsluttet før kodeboksen.

Implementeringen skal se slik ut:

<div class="hoveddiv">

--En del tekst--

<div class="code">

--Koden din--

</div>

-- En del tekst--

</div>

Litt OT:

I .code:

Padding:

Hvis du vil spare deg for 3 linjer kode kan du skrive paddingen slik:

padding: 7px;

eller: padding: 7px 7px 7px 7px;

Den siste padding-definisjonen gjør at du kan bestemme top-right-bottom-left, i denne rekkefølgen. Altså, du kan ha ulike verdier.

Behøver du denne:

overflow: visible; ? Hvis innholdet i kodeboksen din overstiger 100px i høyde (som du har satt til height) vil ikke innholdet da flyte utenfor?

Jeg vet ikke hvor mye hjelp dette var, men men :ermm:

s1gh · 2. februar 2009

Må ærlig innrømme at jeg ikke skjønner hvilken HTML-kode du vil ha...

Er det koden som printer ut bloggpostene og kode-boksen du vil ha?

Dette er i såfall PHP:

//Printer ut bloggpostene
echo "<img class=\"titleImg\" src=\"images/blog_icons/Modify.png\" align=\"left\">";
echo "<h2 class=\"title\"><a class=\"title_blogPost\" href=\"node/$id\">$title</a><hr class=\"lineTitle\"></h2>";
echo "<p class=\"postInfo\"><b>Postet: </b>$date | <b>Tags: </b>";
foreach ($tagsArr as $tag) {
echo "<a class=\"link_tag\" href=\"/tag/$tag/\">$tag </a>";
}
echo "| <b>Comments: </b> $comTotal";
echo "<p class=\"blogContentMain\">$intro</p>";

Det er i den nederste linja kode-boksen ligger.

Teksten som blir printet ut + kode-boksen med <div class="> ligger som ren tekst i databasen, om du skjønner hva jeg mener.

Angående det med css-koden; padding ble rettet opp rett etter jeg postet koden her.

Høyde er forandret til auto.

Endret 2. februar 2009 av Sigh

Asterisk · 2. februar 2009

Beklager at jeg ikke har vært helt klar på hva jeg ønsket av kode. Det jeg ønsket var dette:

echo "<p class=\"blogContentMain\">$intro</p>";

Html-koden er det du skriver ut med echo. Jeg regner med at oppsettet ser noenlunde slik ut når du har hentet en eventuell kode fra databasen:

<p class=\"blogContentMain\">
--en del tekst--

  <div class="code">
     --kode--
  </div>

--en del tekst--
</p>

Det er viktig at du sjekker at alle div's og paragrafer (<p>) er avsluttet riktig. Det vil si at alle tag's skal avsluttes i rikitg rekkefølge. Skal du nøste tag's må den du begynner med avsluttes sist, og nestemann nest sist. Eksempel:

<div class="tag_1">
  <p class="tag_2">
     <div class="tag_3">
     </div>    -- avslutter tag_3
  </p>    --avslutter tag_2
</div>    -- avslutter tag_1

maglame · 3. februar 2009

Uten å ha lest igjennom hele innlegget ditt er også mitt første tips å sørge for at alle div-er er avsluttet riktig. For å gjøre dette enklere anbefaler jeg deg å bruke et program som f.eks. netbeans til å skrive HTML og CSS. Når man markerer en div i et slikt program vil programmet vise deg hvor denne div-en avsluttes. Det er også viktig å strukturere HTML-en sin som vist i eksempelet under, bl.a. for å hjelpe seg selv med å navigere i dokumentet:

<div id="innpakning">
<div id="innhold">
	Denne teksten representerer innholdet.
</div>
</div>

ButterScotch · 3. februar 2009

Hvis koden inneholder < eller > så kan det skape problemer. Oppstår problemet selv om dette ikke er tilfelle?

Ellers: Du gir lenker til to bilder. Hvis du kunne gitt oss HTML-koden (som fra "View Source" i browseren) for disse to sidene, så hadde det holdt. Alt av PHP og baksidelogikk er irrelevant.

I tillegg til CSS, antageligvis, men jeg mistenker at problemet ikke har noe med CSS å gjøre.

s1gh · 4. februar 2009

Kan det være denne koden som ødelegger?:

<div style=\"padding: 7 7 7 7; width: 630px; font-family: Verdana; Font-size: 10px; background-color: #fafad2; color: #000; white-space: default;  overflow: visible; border: 1px; border-style:dashed;\">\\1</div>

Hvis jeg 'wrapper' kodeboksen i en annen tag, f.eks. <pre> blir det samme resultat. Men hvis jeg bruker <code>kode</code> vises alt på riktig plass, men da får jeg ikke like god mulighet til styling, som med bruk av <div>, så det nytter ikke bruke den heller.

Her er index-fila MED kodeboksen:

http://pastebin.com/m40eaa063

Dette er index-fila UTEN kodeboksen:

http://pastebin.com/m2e3805bf

Oi, ser hvor rotete koden er...

Nå er det like før jeg gir opp hele prosjektet om å lage en kodeboks. Jeg finner rett og slett ikke ut hva som er feil.

Endret 4. februar 2009 av Sigh

Asterisk · 4. februar 2009

Fant feilen

Denne <p class="blogContentMain"> byttes ut med denne <div class="blogContentMain">

Husk å avslutte riktig, altså ikke </p>, men </div>. Gjelder div-elementet blogContentMain.

Størrelsen på kodeboksen ble derimot litt endret i størrelse, men det skal være en smal sak å endre. Definer height for å få til det. Hvis du vil ha ein kodeboks som ekspanderer med innholdet kan denne koden benyttes for kodeboksen:

height: auto !important;

min-height: 10px;

height: 10px;

Endre height verdiene til en annen verdi om ønskelig.

Husk også å legge til px for padding i kodeboksen:

padding: 7px 7px 7px 7px; og ikke bare et 7-tall.

s1gh · 4. februar 2009

Ahh, herregud. Tusen takk!!

Du aner ikke hvor glad jeg ble nå!

Logg inn

Div inside div + css

Anbefalte innlegg

s1gh

Lenke til kommentar

Videoannonse

Asterisk

Lenke til kommentar

s1gh

Lenke til kommentar

Asterisk

Lenke til kommentar

s1gh

Lenke til kommentar

Asterisk

Lenke til kommentar

s1gh

Lenke til kommentar

Asterisk

Lenke til kommentar

maglame

Lenke til kommentar

ButterScotch

Lenke til kommentar

s1gh

Lenke til kommentar

Asterisk

Lenke til kommentar

s1gh

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Krigen mellom Israel og Hamas 1 2 3 4 721

Hvem er aktive 0 medlemmer