zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div mit fixem Abstand und variabler Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.08.2010, 17:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.08.2007
Beiträge: 8
tc-burgi befindet sich auf einem aufstrebenden Ast
Standard Div mit fixem Abstand und variabler Breite

Hallo liebes Forum,

ich bastel derzeit ein wenig an meiner Seite und bin nun auf ein Problem gestossen, zudem ich keine Antwort finde. Hier die Beschreibung:

Meine Seite ist in einen linken und einen rechten Teil eingeteilt.

Beide divs bestehen aus mehreren Teilen:

1. Der eigentlich div (prozentuale Breite) 70% links 25% rechts jeweils float
2. Ein div für Überschrift mit Hintergrundgrafik innerhalb des 1. divs über die volle Breite
3. Ein div als optischer Trenner abgesetzt. Dieser Div bereitet mir die Probleme, weil ich diesen div gerne mit fixem margin (20px rechts und links) definieren möchte. Die Breite soll quasi automatisch berechnet werden dazwischen und angezeigt werden. Mit width auto funktioniert dies leider nicht.

Könnt ihr mir helfen? Ich hoffe, ich habe das Problem verständlich erklärt. Anbei sende ich noch die main.php, die den html-code enthält und das notwendige css.

Das div welches ich eingerückt haben möchte heisst div#ContentBorderTop

Für Antworten wäre ich euch sehr dankbar.

main.php

PHP-Code:
        echo "    <body>\n";
        echo 
"        <div id=\"banner\">\n";
        echo 
"            <img id=\"banner\" width=\"200\" height=\"150\" src=\"img/banner.png\" alt=\"www.ecke-rosbach.de\" />\n";        
        echo 
"        </div>\n";
        
        
showMainMenu();
        
        echo 
"        <div id=\"ContentLeftBackground\">\n";
        echo 
"            <div id=\"ContentHeadline\">\n";
        echo 
"                <img class=\"leftScrew\" width=\"25\" height=\"20\" src=\"img/headline_screw_left.png\" alt=\"Eine Schraube\" />\n";
        echo 
"                <img class=\"rightScrew\" width=\"25\" height=\"20\" src=\"img/headline_screw_normal.png\" alt=\"Eine Schraube\" />\n";
        echo 
"                <div class=\"text_mainHeadline\">Hauptinhalt</div>\n";                    
        echo 
"            </div>\n";
        
        echo 
"            <div id=\"ContentBorderTop\"></div>\n";
        
        echo 
"            <div id=\"Content\">\n";        
        echo 
"                 Something";
        
//        checkContentToShow();
        
        
echo "            </div>\n";        
        echo 
"        </div>\n";        
        
        echo 
"        <div id=\"ContentRightBackground\">\n";
        echo 
"            <div id=\"ContentHeadline\">\n";
        echo 
"                <img class=\"leftScrew\" width=\"25\" height=\"20\" src=\"img/headline_screw_left.png\" alt=\"Eine Schraube\" />\n";
        echo 
"                <img class=\"rightScrew\" width=\"25\" height=\"20\" src=\"img/headline_screw_normal.png\" alt=\"Eine Schraube\" />\n";
        echo 
"                <div class=\"text_mainHeadline\">Hauptinhalt</div>\n";                    
        echo 
"            </div>\n";
        
        echo 
"            <div id=\"ContentBorderTop\"></div>\n";
        
        echo 
"            <div id=\"Content\">\n";        
        echo 
"                 Something";
        
//        checkContentToShow();
        
        
echo "            </div>\n";                
        echo 
"        </div>\n";
        echo 
"    </body>\n";
        echo 
"</html>\n"
css:

Code:
/*	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	- Beschreibung der einzelnen Typen
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body {
	margin:0px;
	font-family:sans-serif;
	font-size:11px;
	text-align:left;
	color:black;
	background-color:#090909;
}

img {
	border:0px;
}

/*	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	- Beschreibung der einzelnen Id´s
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	
/*	- Richtet das Bild im Banner oben aus - */
img#banner {
	float:right;
	border:inherit;
}

/*	- Container für den Banner oben - */
div#banner {
	width:100%;
	height:150px;
	margin:0px;	
	border:0px;
}

/*	- Container für das Hauptmenü unter dem Banner - */
div#mainMenu {
	width:100%;
	height:30px;
	background-image:url('../img/menu_small.png');
	background-repeat:repeat-x;
}

/*	- Container für den linken Bereich - */
div#ContentLeftBackground {
	width:70%;
	margin:2% 0% 0% 1%;
	background-color:#8f8f8f;
	padding:0%;
	float:left;
}

/*	- Container für den rechten Bereich - */
div#ContentRightBackground {
	width:23%;
	margin:2% 1% 0% 0%;
	background-color:#8f8f8f;
	padding:0%;
	float:right;
}

/*	- Container für die Überschrift über dem jeweiligen Bereich - */
div#ContentHeadline {
	float:inherit;
	width:100%;
	height:20px;
	margin:0%;
	background-image:url('../img/headline_small.png');
	background-repeat:repeat-x;
	text-align:center;
}

/*	- Container für den Rahmen oberhalb des Inhalts - */
div#ContentBorderTop {
	float:inherit;
	width:auto; 
	margin:20px 10px 0px 10px;
	height:10px;
	background-color:#760000;
	border:1px black solid;
	display:inline;
}

/*	- Container für den Inhalt - */
div#Content {
	float:inherit;
	width:100%;
	margin:0%;
	background-color:#f1f1f1;
	border:1px black solid;
	border-top:0px;
}

/*	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
	- Beschreibung der einzelnen Klassen
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.leftScrew { float:left; }

.rightScrew { float:right; }
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:42 Uhr.