gestrichelter rahmen (später unsichtbar) verschieben??

Peggy1990

in meiner seite, habe ich einen gestrichelten rahmen, den man aber später nicht sieht, wenn die seite angezeigt wird. es ist der rahmen gemeint, in dem "asdhk..." steht. diesen rahmen möchte ich mehr nach oben haben, mehr an das menü, sodass der abstand nicht so groß ist. könntet ihr mir da bitte helfen? hier der html code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:active {color:black; text-decoration:none}
a:hover {
	color:#FFFFFF;
	text-decoration:none;
	background-color: #000000;
}
.Stil1 {
	color: #000000;
	font-weight: bold;
	font-family: Perpetua;
	font-size: 12px;
}
.Stil2 {font-size: 12px}
</style>
<title>Peggys Seite</title>
<meta name="author" content="peggy">
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
<!--
.Stil2 {
	font-size: 12px;
	font-weight: bold;
}
.Stil3 {font-size: 12px}
.Stil3 {	font-size: 12px;
	font-weight: bold;
}
.Stil4 {font-size: 12px}
.Stil4 {	font-size: 12px;
	font-weight: bold;
}
.Stil6 {font-size: 12px}
.Stil6 {	font-size: 12px;
	font-weight: bold;
}
-->
</style>
</head>
<body >
<div class="all">
<div class="head">
 <div class="menu">
   <p class="Stil2"><span class="Stil3">HOME&Uuml;BER MICH </span> REFERENZEN<span class="Stil6">DOWNLOADS</span>G&Auml;STEBUCH<span class="Stil4">[url='impressum.html']IMPRESSUM[/url]</span></p>
 </div>
 <div id="logo">[img]logo2.gif[/img]</a> </div>
</div>
 <div class="content">



asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf


     asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf


     asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf


     asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf


    asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf  asdhjkashdjkadjkfhasdf</p>



</p>



</p>



</p>



</p>



</p>







   </p>
 </div>
 




   
 </p>
 <div class="rightline">
   <div class="box_surrounder">
    <div class="box_head">
    ~*Links*~
    </div>
    <div class="box_content">
    [url='http://peggy1990.uboot.com/']Nickpage[/url]
            [url='http://peggy1990.uboot.com/gallery/']Gallery[/url]
            [url='http://www.duplex-dresden.de/']Duplex Druck- &amp; Werbeservice DD [/url]
          [url='http://www.dynamo-dresden.de/']Dynamo Dresden [/url]
      [url='http://www.sunshine-live.de/']Sunshine Live [/url]    </div>
    <div class="box_bottom">
     </div>
   </div>
  </div>



</p>



</p>





    
  </p>
  <div class="rightline">

    <div class="box_surrounder">
      <div class="box_head"> ~*Bilder*~ </div>
      <div class="box_content"> 
        <div align="justify">[url='index.html']Autos[/url] [url='index.html']Dynamo Dresden [/url] [url='http://wyman.uboot.com']England 2005 [/url] [url='http://wyman.uboot.com/gallery/jack']Diemitz 2005 [/url] [url='http://wyman.uboot.com/gallery/jack']&Ouml;sterreich 2006[/url]
            [url='http://wyman.uboot.com/gallery/jack']Tschechien 2006 [/url]
          </div>
      </div>
      <div class="box_bottom"> </div>
    </div>
  </div>



</p>



</p>



 </p>



    </p>
</div>
<div class="bottom">Copyright 2006 by Peggy S&auml;urich </div>
</body>
</html>

Alles anzeigen

wie das ganze aussieht, seht ihr hier http://img216.imageshack.us/my.php?image=screenshot7wq.jpg

is sehr wichtig, ich hoffe ihr könnt mir helfen!! danke!

majoversum

in dreamweaver gemacht? wenn ja, existiert noch ne index.css! zumindest gib es zu eben dieser css noch einen link im code, poste die auch mal dazu! weil dort muessen die positionen und angaben zu den <div>-Tags sein...

Peggy1990

ja richtig, mit dreamweaver und ne index.css gibts och....

hier die index.css

Code

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
}
.all {
   display: block;
	width: 750px;
	height: 95%;
	padding: 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background-image: url(contentbody.gif);
	background-repeat: repeat-y;
	background-position: center;
}
.head {
   display: block;
	width: 750px;
	height: 83px;
	background-image: url(head.gif);
	background-position: top center;
	background-repeat: no-repeat;
}
.menu {
   display: block;
	float: left;
	width: 475px;
	margin-top: 27px;
	margin-left: 14px;
}
body > .all .head .menu {
	margin-left: 27px;	
}
.menu a img {
	border: 0px;
}
#logo {
   display: block;
	float: left;
	width: 210px;
   margin-top: 27px;
	margin-left: 4px;
	text-align: center;
}
.content {
   display: compact;
	float: left;
	border-right: 1px dotted #FF8D1A;
	width: 490px;
	margin-left: 14px;
	margin-top: -140px;
}
body > .all .content {
	margin-left: 27px;
	font: 00000;
}
.bottom {
   clear: both;
   display: block;
	width: 750px;
   height: 68px;
	background-image: url(bottom.gif);
	background-position: bottom center;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.bottom span {

}
.rightline {
	float: right;
	border: 0px solid black;
	margin-top: 5px;
	width: 180px;
	margin-right: 14px;
}
.all > .rightline {
	margin-right: 30px;
}
.box_surrounder {
	width: 155px;
	border: 0px solid black;
	background-image: url(box_line.gif);
	background-repeat: repeat-y;
}
.box_head {
	width: 155px;
	height: 26px;
	background-image: url(box_head.gif);
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 7px;
	color: #ffffff;
	}
.box_content {
   width: 155px;
	text-align: left;
}
.box_content a:link, .box_content a:visited{
   margin-left: 14px;
	margin-right: 14px;
	padding: 2px;
	display: block;
	color: #ffffff;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;	
	border-top: 1px dotted #313131;
	border-bottom: 1px dotted #313131;
}
.box_content a:hover {
   color: #bbbbbb;
	border-top: 1px dotted #ffffff;
	border-bottom: 1px dotted #ffffff;

}
.box_bottom {
	width: 155px;
	height: 7px;
	background-image: url(box_bottom.gif);
	background-repeat: no-repeat;
	font-size: 0px;
}

Alles anzeigen

majoversum

Code

.content {
   display: compact;
   float: left;
   border-right: 1px dotted #FF8D1A;
   width: 490px;
   margin-left: 14px;
   margin-top: -140px;
}

Nimm hier mal das margin-top raus... Sollte ansich ausreichen!

Lizzard

Hi,

ich finde eher, du solltest das Margin-Top erhöhen, da es sich eh schon im negativen Bereich befindet Dadurch rutscht dann das Element mit Klasse .content höher.

Beim herausnehmen des Margin-tops, würde dein Element um 140px nach unten rutschen

MfG
LizZard

majoversum

ooops, das - uebersehen

Peggy1990

supi, ihr seid spitze

wenn ihr mir noch sagen könnt, wie ich so en gestrichelten rahmen überhaupt einfüge (den man später ni mehr sieht)? das hat mir nämlich jemand gemacht... also bitte für "dumme" erklären

majoversum

Das ist ein Bereich und Dreamweaver definiert eben diesen mit diesen "Rahmen" ... Sozusagen ist das eine Hilfe fuer dich, damit du siehst wie groß der Bereich xy ist.
Folglich muesstest du im Dreamweaver neue <div>-Tags generieren irgendwo und dann macht er den... <div>-Tags kannst du oben in der Symbolleiste irgendwo auswaehlen...

Peggy1990

hmm also neben dem bild... wie ihr beim screenshot sehen könnt, hab ich jetz so en "rahmen" erstellt. jedoch kann ich den gar nicht nach oben schieben, sodass er auf der gleichen höhe wie das bild ist. ich möchte nämlich neben dem bild einen kleinen text schreiben, nur weiß ich nicht, wie ich das sonst machen könnte. könntet ihr mir den quelltext posten, wie ich das mache neben dem bild was schreiben?

hier nochma die aktuellen quellcodes und ein screenshot:

index.css:

Code

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
}
.all {
   display: block;
	width: 780px;
	height: 95%;
	padding: 0px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background-image: url(contentbody.gif);
	background-repeat: repeat-y;
	background-position: center;
}
.head {
   display: block;
	width: 750px;
	height: 83px;
	background-image: url(head.gif);
	background-position: top center;
	background-repeat: no-repeat;
}
.menu {
   display: block;
	float: left;
	width: 475px;
	margin-top: 27px;
	margin-left: 14px;
}
body > .all .head .menu {
	margin-left: 27px;	
}
.menu a img {
	border: 0px;
}
#logo {
   display: block;
	float: left;
	width: 210px;
   margin-top: 27px;
	margin-left: 4px;
	text-align: center;
}
.content {
   display: block;
	float: left;
	border-right: 1px dotted #FF8D1A;
	width: 490px;
	margin-left: 14px;
	margin-top: -150px;
}
body > .all .content {
	margin-left: 27px;	
}
.bottom {
   clear: both;
   display: block;
	width: 750px;
   height: 68px;
	background-image: url(bottom.gif);
	background-position: bottom center;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.bottom span {

}
.rightline {
	float: right;
	border: 0px solid black;
	margin-top: 0px;
	width: 180px;
	margin-right: 14px;
}
.all > .rightline {
	margin-right: 30px;
}
.box_surrounder {
	width: 155px;
	border: 0px solid black;
	background-image: url(box_line.gif);
	background-repeat: repeat-y;
}
.box_head {
	width: 155px;
	height: 26px;
	background-image: url(box_head.gif);
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 7px;
	color: #ffffff;
	}
.box_content {
   width: 155px;
	text-align: left;
}
.box_content a:link, .box_content a:visited{
   margin-left: 14px;
	margin-right: 14px;
	padding: 2px;
	display: block;
	color: #ffffff;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;	
	border-top: 1px dotted #313131;
	border-bottom: 1px dotted #313131;
}
.box_content a:hover {
   color: #bbbbbb;
	border-top: 1px dotted #ffffff;
	border-bottom: 1px dotted #ffffff;

}
.box_bottom {
	width: 155px;
	height: 7px;
	background-image: url(box_bottom.gif);
	background-repeat: no-repeat;
	font-size: 0px;
}

Alles anzeigen

html code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
a:link {color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:active {color:black; text-decoration:none}
a:hover {
	color:#FFFFFF;
	text-decoration:none;
	background-color: #000000;
}
.Stil1 {
	color: #000000;
	font-weight: bold;
	font-family: Perpetua;
	font-size: 12px;
}
.Stil2 {font-size: 12px}
</style>
<title>Downloads - Homepage von Peggy S&auml;urich</title>
<meta name="author" content="peggy">
<link rel="stylesheet" type="text/css" href="index.css">
<style type="text/css">
<!--
.Stil2 {
	font-size: 12px;
	font-weight: bold;
}
.Stil3 {font-size: 12px}
.Stil3 {	font-size: 12px;
	font-weight: bold;
}
.Stil4 {font-size: 12px}
.Stil4 {	font-size: 12px;
	font-weight: bold;
}
.Stil6 {font-size: 12px}
.Stil6 {	font-size: 12px;
	font-weight: bold;
}
.Stil9 {color: #FF9900}
.Stil11 {font-size: 11px}
.Stil13 {color: #999999}
.Stil20 {color: #FF6600}
.Stil21 {font-size: 12}
.Stil24 {color: #FF9900; font-weight: bold; }
.Stil25 {	font-size: 12;
	color: #999999;
}
-->
</style>
</head>
<body >
<div class="all">
<div class="head">
 <div class="menu">
   <p class="Stil2"><span class="Stil3">[url='index.html']HOME[/url]&Uuml;BER MICH </span> REFERENZEN<span class="Stil6">[url='downloads.html']DOWNLOADS[/url]</span>G&Auml;STEBUCH[url='impressum.html']<span class="Stil4">IMPRESSUM</span>[/url]</p>
 </div>
 <div id="logo">[img]logo2.gif[/img]</a> </div>
</div>
 <div class="content">



<span class="Stil9">[b]Wallpaper[/b]:. </span> </p>
   <hr align="left" style="width:470px; color:#FF9900; background-color:#FF6600;
  margin-left:0; text-align:left; border:1px dashed orange;">
   <p class="Stil20">[img]Wallpaper/sonnenuntergang_borny_vorschau.jpg[/img]</p><div class="rightline"></div>



</p>



</p>



</p>



</p>



</p>



</p>



</p>



</p>



</p>



</p>



</p>







   </p>
 </div>
 




   
 </p>
 <div class="rightline">
   <div class="box_surrounder">
    <div class="box_head">
    ~*Links*~
    </div>
    <div class="box_content">
    [url='http://peggy1990.uboot.com/']Nickpage[/url]
            [url='http://peggy1990.uboot.com/gallery/']Gallery[/url]
            [url='http://www.duplex-dresden.de/']Duplex Druck- &amp; Werbeservice DD [/url]
          [url='http://www.dynamo-dresden.de/']Dynamo Dresden [/url]
      [url='http://www.sunshine-live.de/']Sunshine Live [/url]    </div>
    <div class="box_bottom">
     </div>
   </div>
  </div>



</p>



</p>





    
  </p>
  <div class="rightline">

    <div class="box_surrounder">
      <div class="box_head"> ~*Bilder*~ </div>
      <div class="box_content"> 
        <div align="justify">[url='index.html']Autos[/url] [url='index.html']Dynamo Dresden [/url] [url='http://wyman.uboot.com']England 2005 [/url] [url='http://wyman.uboot.com/gallery/jack']Diemitz 2005 [/url] [url='http://wyman.uboot.com/gallery/jack']&Ouml;sterreich 2006[/url]
            [url='http://wyman.uboot.com/gallery/jack']Tschechien 2006 [/url]
        </div>
      </div>
      <div class="box_bottom"> </div>
    </div>
  </div>



</p>



</p>



 </p>



    </p>
</div>
<div class="bottom">Copyright 2006 by Peggy S&auml;urich </div>
</body>
</html>

Alles anzeigen

screenshot:
http://img172.imageshack.us/my.php?image=screenshot2me.jpg

Peggy1990

könnte euch die anderen dateien och gern per mail schicken oder icq oder so, wenn euch das hilft. is nämlich en großes problem for me.