html - <div> problem - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #9948 @ 16.08.08 13:26

Kære Udv.

Jeg har et problem med 3 styks divs som skal stå ved siden af hinanden.

"conleft" skal stå til venstre og have et billede som baggrund (m. repeat-y) og skal følge "conmid" i højden (altså danne en "ramme" uden om den) - det samme gælder for "conright" dog skal den være på højre side af "conmid"

Der er både et problem i IE ("conmid" er centreret men "conleft" og "conright" følger ikke "conmid" langs kanten) og FF (intet er centreret og "conleft"/"conright" følger igen ikke "conmid").

IE: http://maveas.dk/blackbox/IE.jpg
FF: http://maveas.dk/blackbox/FF.jpg

Koden er følgende:

Kode

<div id="conleft"></div>
<div id="conright"></div>
<div id="conmid"><jdoc:include type="component" /></div>

Kode

div#conleft {
border: 0px none;
background-image: url("/templates/simplesupport/images/website_12.jpg");
background-repeat: repeat-y;
float: left;
height: auto;
width: 95px;
z-index: 1;
}

div#conright {
border: 0px none;
background-image: url("/templates/simplesupport/images/website_14.jpg");
background-repeat: repeat-y;
float: right;
height: auto;
width: 71px;
z-index: 3;
}

div#conmid {
background-color: #212121;
border: 0px none;
width: 958px;
z-index: 2;
}

Håber I kan hjælpe.

11 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #10216 @ 16.08.08 23:19

4.283

Da det ikke er muligt at kopiere højde til forskellige elementer er du nødt til at wrappe elementerne.

Nedestående er blot et setup for hvordan det kan se ud. Styling mm. må du selv sørge for.

HTML kode

 <div id="conleft" style="border-left: 2px solid red;">
     <div id="conright" style="border-right: 2px solid red;">
         <div id="conmiddle" style="margin: 10px; border-top: 2px solid red; border-bottom: 2px solid red;">
             <div class="content">
                 asdjsaljdl lsajdlsajd 
                 asdsadasd
             </div>
         </div>
     </div>
 </div>

Indlæg senest redigeret d. 16.08.2008 23:20 af Bruger #10216

Bruger #11361 @ 16.08.08 15:57

106

Ingen anelse.
Altså.. Problemet er vel at den overskrider de 1124 px som din frame-div er bred.
Når du så floater til venstre, og et element overskrider sin tildelte størrelse, så hopper alle andre længere ned.

Så prøv at ændre lidt på nogle af de størrelser som bliver tildelt.
Evt. giv din table en px værdi, istedet for 100%.

Jeg skyder i blinde her..

Bruger #11361 @ 16.08.08 13:41

106

Har du sat en div rundt om dine tre div's, til at holde det hele på plads?

Bruger #9948 @ 16.08.08 13:46

Ja, der er en main div - hvori logo, menu og det andet sidder.

Bruger #11361 @ 16.08.08 13:48

106

Prøv lige at poste hele din kode så..

Bruger #9948 @ 16.08.08 14:41

Jeg poster..

Kode

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
	<head>
		<jdoc:include type="head" />
		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/simplesupport/css/template.css" type="text/css" />
    <link rel="stylesheet" href="css/template.css" type="text/css" />
	</head>
  <body>
	  <div id="frame">
    	<div id="top">
      	<div id="topleft"><img src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_01.jpg" /></div>
        <div id="topright">
        	<div id="topright-top"><img src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_02.jpg" /></div>
          <div id="topright-mid"><a href="<?php echo $this->baseurl ?>"><img id="menu" src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_03.jpg" /></a><a href="<?php echo $this->baseurl ?>/nyheder"><img id="menu" src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_04.jpg" /></a><a href="<?php echo $this->baseurl ?>/profil"><img id="menu" src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_05.jpg" /></a><a href="<?php echo $this->baseurl ?>/ydelser"><img id="menu" src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_06.jpg" /></a><a href="<?php echo $this->baseurl ?>/priser"><img id="menu" src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_07.jpg" /></a><a href="<?php echo $this->baseurl ?>/kontakt"><img id="menu" src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_08.jpg" /></a><img src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_09.jpg" /></div>
        	<div id="topright-bot"><img src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_10.jpg" /></div>
        </div>
      </div>
      <div id="mid"><?php
				$url = $_SERVER['REQUEST_URI'];
				if ($url == "/") { echo "<img src='".$this->baseurl."/templates/simplesupport/images/velkommen.jpg' />"; }
				if ($url == "/nyheder") { echo "<img src='".$this->baseurl."/templates/simplesupport/images/nyheder.jpg' />"; }
        if ($url == "/profil") { echo "<img src='".$this->baseurl."/templates/simplesupport/images/profil.jpg' />"; }
				if ($url == "/ydelser") { echo "<img src='".$this->baseurl."/templates/simplesupport/images/ydelser.jpg' />"; }
				if ($url == "/priser") { echo "<img src='".$this->baseurl."/templates/simplesupport/images/priser.jpg' />"; }
				if ($url == "/kontakt") { echo "<img src='".$this->baseurl."/templates/simplesupport/images/kontakt.jpg' />"; }
				?>
      </div>
      <div id="conleft"></div>
      <div id="conright"></div>
      <div id="conmid"><jdoc:include type="component" /></div>      
      <div id="bot"><img src="<?php echo $this->baseurl ?>/templates/simplesupport/images/website_15.jpg" /></div>
    </div>
  </body>
</html>

Kode

body {
margin-top: 0px;
background-color: #2a2a2a;
}

div#frame {
border: 0px none;
margin-left: auto;
margin-right: auto;
width: 1124px;
}

div#top {
border: 0px none;
height: 113px;
width: 1124px;
}

div#topleft {
border: 0px none;
float: left;
width: 476px;
}

div#topright {
border: 0px none;
float: right;
width: 648px;
}

div#topright-top {
border: 0px none;
height: 47px;
}

div#topright-mid {
border: 0px none;
height: 38px;
}

div#topright-bot {
border: 0px none;
height: 28px;
}

img#menu {
border: 0px none;
}

div#mid {
border: 0px none;
height: 154px;
width: 1124px;
}

div#conleft {
border: 0px none;
background-image: url("/templates/simplesupport/images/website_12.jpg");
background-repeat: repeat-y;
float: left;
height: auto;
width: 95px;
z-index: 1;
}

div#conright {
border: 0px none;
background-image: url("/templates/simplesupport/images/website_14.jpg");
background-repeat: repeat-y;
float: right;
height: auto;
width: 71px;
z-index: 3;
}

div#conmid {
background-color: #212121;
border: 0px none;
width: 958px;
z-index: 2;
}

div#bot {
border: 0px none;
clear: both;
height: 13px;
width: 1124px;
}

Indlæg senest redigeret d. 16.08.2008 14:42 af Bruger #9948

Bruger #11361 @ 16.08.08 15:42

106

Jeg kan ikke finde ud af hvad problemet er.. Desværre

Bruger #9948 @ 16.08.08 15:51

Fair nok.

Når Joomla har tilføjet sit indhold, så kommer der selvfølgelig ekstra tabeller ind i div'en "conmid", men jeg mener ikke, at det burde have nogen indflydelse på problemmet?

Koden er følgende:

Kode

      <div id="conmid"><table class="contentpaneopen">
<tr>
				
		
						<td align="right" width="100%" class="buttonheading">
			<span class="hasTip" title="Rediger artikel :: Publiceret<br />Offentlig<br />Mandag, 11 August 2008<br />Casper Madsen"><a href="/index.php?view=article&id=1:velkommen&task=edit" ><img src="/images/M_images/edit.png" alt="rediger"  /></a></span>		</td>
			</tr>
</table>

<table class="contentpaneopen">



<tr>

<td valign="top">
Velkommen til Simple Support.

</td>
</tr>

</table>
<span class="article_separator"> </span>
</div>

Bruger #9948 @ 16.08.08 18:08

Ingen løsning på problemmet endnu.

Findes der mon en hardcore css gut derude?

Bruger #9948 @ 17.08.08 12:47

Et kæmpe tak til dig Gnu.

Nu mangler jeg dog kun at få vist kanten på højreside.

HTML:

Kode

	    <div id="conleft">
    		<div id="conright">
    			<div id="conmid">
    				<div class="content"><jdoc:include type="component" /></div>
          </div>
        </div>
      </div>

CSS:

Kode

div#conleft {
background-image: url("/templates/simplesupport/images/website_12.jpg");
background-repeat: repeat-y;
border: 0px none;
float: left;
width: 1124px;
}

div#conright {
border: 0px none;
background-image: url("/templates/simplesupport/images/website_14.jpg");
background-repeat: repeat-y;
float: right;
margin-left: 95px;
width: 1029px;
}

div#conmid {
background-color: #212121;
border: 0px none;
float: left;
width: 958px;
}

div#con {
background-color: #212121;
border: 0px none;
float: left;
width: 958px;
}

<< < 1 2 > >>

<div> problem

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler