Verschieben von Div innerhalb einer Tabelle

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

marvinkleinmusic hat kostenlosen Webspace.

18:24, 4.4.2013

Hallo Zusammen,

Ich habe zwar nicht den richtigen Bereich für diesen Thread gefunden da ich denke das HTML hier wohl jeder drauf hat dennoch habe ich ein kleines Problem.

Ich möchte gerne die Div Container (Haben einen Orangen hintergrund , nicht der Border des ganzen) möchte ich gerne am Anfang des td tags haben sodass ich da keinen weissen raum zwischen habe ebenso soll direkt am ende des divs direkt der zweite div anfangen ebenfalls ohne weissen abstand (siehe Grafik rot eingeramten Bereich).
http://i45.tinypic.com/2rd7mfd.png

Ich habe es schon mit paddings,margins und position befehle in CSS versucht komme aber nicht hinter die Lösung vielleicht kann mir ja einer von euch weiter helfen.

Hier die beiden Quellcodes:

DIV:

<center>
<div id="überschrift">
<h1>Welcome, <? echo "$usr"; ?></h1>
<p class="überschrift_teil2">Profile , Messages, Settings , Logout</p>
</div>
</center>
<center>
<div id="überschrift">
<textarea cols="20" rows="3"></textarea>
<p class="überschrift_teil2"><input type="submit" value="submit"></p>
</div>
</center>

CSS:

@font-face { font-family: teen; src: url(../cmy/fonts/teen.ttf); } 



#content{
border : 3px  #FF9900 ;
border-top-style:solid;
border-right-style:none;
border-left-style:solid;
border-bottom-style:solid;
background-color:white;
width: 700px;
margin-right: 0px;
padding-left:22px;
padding-right:22px;
padding-top:5px;
padding-bottom:5px;
position:top;
}

#right{
font-size: 14px;
background-color:white;
line-height: 15px;
font-family: trebuchet ms arial, helvetica, tahoma ,verdana,  sans-serif;
border:3px #FF9900;
border-left-style:dotted;
border-left-width:1px;
border-right-style:solid;
border-top-style:solid;
border-bottom-style:solid;
padding-left:10px;padding-top:0px;padding-right:10px;padding-bottom:10px;
width:500px;
margin-top:0px;
margin-left:100px;
margin-right:0px;
margin-bottom:0px;
color:#000000;
position:top;
}

#überschrift{
background-color:#FF9900;
width:495px;
position:top;
}

.überschrift_teil2{
margin-top:-1,5em;
font-size:1.5em;
position:top;
}


body {
  background:url('http://smule-web.s3.amazonaws.com/images/magicpiano/new/clouds_toplft.png') left top no-repeat, url('http://smule-web.s3.amazonaws.com/images/magicpiano/new/clouds_floatingRt.png') right 442px no-repeat, url('http://smule-web.s3.amazonaws.com/images/magicpiano/new/clouds_bottomRt.png') right bottom no-repeat, url('http://smule-web.s3.amazonaws.com/images/magicpiano/new/rays.png') center top no-repeat, url('http://smule-web.s3.amazonaws.com/images/magicpiano/new/bg_gradient.png') left top repeat-x #3e71ef;
}

#navigation{
border-radius: 3px;
background-image:url('http://marvinkleinmusic.de/cmy/images/leiste.png');
height:55px;
width:905px;
padding-left:10px;
position:top;
}

LG

EDIT:// Grade gesehen das es einen passenden Bereich gibt bitte verschieben ;)

Beitrag zuletzt geändert: 4.4.2013 18:26:47 von marvinkleinmusic

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
zenwort

zenwort hat kostenlosen Webspace.

19:04, 4.4.2013
Entschuldigung, aber zum ersten sehe im code kein <td> was " Div Container (Haben einen Orangen hintergrund , nicht der Border des ganzen) möchte ich gerne am Anfang des td" ziemlich unverständlich macht., zweitens zeigt ein Blick in den Quellcode dDeiner seite, daß Du HTML5 als doctype hast, wo Sachen wie <center> absolut nichts mehr zu suchen haben. Drittens ist das verwenden einer <table> zu Layoutzwecken auch nicht mehr das Wahre. Warum hier ein background-color für <table> nichts helfen sollte ist mir auch unklar.

Vorschlag: Arbeite dich vernünftig in CSS3 ein, versuche eine evtl. eine Flexbox zu bauen (modernizer.js in den head), mit eindeutigen IDs und class , dann kann man die Seite auch auf Mobilgeräten besser nutzen.

keyrank

keyrank hat kostenlosen Webspace.

19:15, 4.4.2013

nimm nicht 2x die gleiche DIV id ... jedes DIV sollte eine eigene (eindeutige) id haben
eine CSS id "darf" man im HTML nur einmal anwenden, sonst für mehrfach numm Klasse

BSP ... ganz grob als Test

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
td { 
  margin: 0;
  padding:0; 
}

#div1 { 
  margin: 0;
  padding:0; 
  float:left;
  width:296px; 
  background:#CCFFAA; 
  border: 2px solid #CC33FF; 
}

#div2 { 
  margin: 0;
  padding:0; 
  float:left;
  width:296px; 
  background:#AAFFCC; 
  border: 2px solid #CC33FF; 
}
-->
</style>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<br>
<br>

<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" width="700">
  <tr>
    <td width="100">x</td>
    <td width="600">y</td>
  </tr>
  <tr>
    <td width="100">z</td>
    <td width="600">
	
	<div id="div1">
	  <p>Erste Box</p>
	  <p>Bla bla bla bla</p>
	</div>
	
	<div id="div1">
	  <p>Erste Box</p>
	  <p>Bla bla bla bla</p>
	</div>
	
	</td>
  </tr>
</table>

<br>
<br>

</body>
</html>

oder mit Klasse anstatt ID

CSS:

.divbox { 
  margin: 0;
  padding:0; 
  float:left;
  width:296px; 
  background:#CCFFAA; 
  border: 2px solid #CC33FF; 
}

und dann im HTML

...
	<div class="divbox">
	  <p>Erste Box</p>
	  <p>Bla bla bla bla</p>
	</div>
	
	<div class="divbox">
	  <p>Erste Box</p>
	  <p>Bla bla bla bla</p>
	</div>
...

zum Abstand ... wenn Du je DIV einen border:2px machst,
dann musst Du diese 2 mal 2px (links und rechts) von der Breite abziegen

also das td Element hat z.B. eine Breite von: 600px
dann die zwei DIVs jeweils (300-4) = 296 Pixel Breite
weil ja die Rahmen-Breite noch dazu kommt ...

zumindest ist das in meinem Browser (FF) so
kann je Browser auch anders sein ...
... ich glaub mit Außen-/ Innen- Abstand (margin / padding) ist im IE irgendwas anders ... :(

und Nebeneinander geht mit CSS-Befehl float: left;

PS: anstatt Tabelle ist es evtl. besser auch das "drum-herum" mit DIV zu machen

pcw

pcw hat kostenlosen Webspace.

19:19, 4.4.2013

marvinkleinmusic schrieb:
,,, möchte ich gerne am Anfang des td tags haben ....[/IMG]

welche td's (und vorallem für was)

... dein Quellcode ist unvollständig und Tabellen für nicht tabellarischen Inhalt verwendet man nicht

Mit einer Testseite - und somit kompletten Quelltext und CSS - die du auf deinem Webspace bei Lima hochlädst, wäre Hilfewilligen mehr geholfen *lach*

Ansonsten würde mir jetzt spontan cellspacing und/oder cellpadding einfallen.
Aber wie bereits geschrieben.... komplette Beispielseite, wenn du wirklich Hilfe brauchst!

Ups... ich tippe zu langsam

keyrank schrieb:

dann musst Du diese 2 mal 2px (links und rechts) von der Breite abziegen

muss man nicht, wenn man dem Element box-sizing: border-box gibt

Beitrag zuletzt geändert: 4.4.2013 19:22:49 von pcw
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city