Design-Rand entfernen

nobie

hi,
ich möchte meine Homepage b r e i t e r machen und deshalb den rechten und linken Rand schmaler machen oder ganz wegmachen. (Design-Ränder)
Ich habe eine externe CSS Datei.
Wo und wie muß ich eine Änderung in der CSS Datei vornehmen?

Danke

Dodo

Wie wärs mit einem Link?

driver

also so, ohne link, ohne quelltext -geht hier garnix.
wir sind schließlich informatiker und keine hellseher...

btw. rahmen ? border !

nobie

ja danke, bin Anfänger, hier ist der Quelltext der CSS Datei.

ganze Seite Inhalt ohne footer
*******************/

#content {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}

/***************************************************
Topbar with newsletter form and theme change buttons
***************************************************/

#topbar {
float: left;
width: 100%;
padding: 0.6em 0;

font-size: 0.8em;
text-transform: uppercase;

color: #CFD9DB;
background: #FFF url(../images/bg/topbar.gif) repeat-x bottom left;
}

/*********************************************
Top menu and logo
******************************************/

#header {
clear: both;
position: relative;
height: 5em;
margin: 0 auto;
background: #48525B url(../images/bg/header.gif) repeat-x bottom left;
border-bottom: 2px solid #48525B;
background-color: #48525B;
}

#header img {
position: absolute;
top: 5%;
left: 10px;
}

#header ul {
margin: 3.5em 1em 0 0 !important;
margin: 3.5em 0.5em 0 0;
padding: 0;
float: right;
}

#header ul li {
display: inline;
list-style: none;
}

#header ul li a {
float: left;
padding: 0 1em;

font: 400 1.1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;

color: #cccccc;
border-right: 1px solid #4D5760;
}

#header ul li a.last {
padding-right: 0;
border-right: 0;
}

#header ul li a:hover {
color: #3B5D77;
}

/**************************************************************
Header Image/Flash Movie
**************************************************************/

#headerImg {
margin: 0 auto;
height: 143px;
background: url(../images/bg/header_image.jpg) no-repeat top left;
}

/**************************************************************
Top Block Menu
**************************************************************/

#menu {
margin: 0 auto;
}

#menu ul {
width: 100%;
float: left;
margin: 0;
padding: 0;

text-align: left;
background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
}

#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}

#menu ul li a {
float: left;
width: 25%;
height: 1.5em;

font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;

color: #fff;

border-top: 7px solid #41637D; border-bottom: 15px solid #FFF
}

#menu ul li a span {
display: block;
padding: 2px 7px;
}

#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}

#menu ul li a:hover,
#menu ul li a.here {
background: #4A5C6A;
border-top: 7px solid #455660;
}

#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}

/* Top menu icons */

/**************************************************************
Page Content
**************************************************************/

#page {
clear: both;
float: left;
width: 100%;
margin-bottom: 6em;
text-align: left;
}

#columns {
margin: 0 auto;
}

/* Column widths */
.width {
width: 776px;
}

.widthPad {
width: 746px;
}

.width25 {
width: 24%;
}

.width50 {
width: 48%;
}

.width73 {
width: 73%;
}

.width75 {
width: 75%;
}

.width100 {
width: 100%;
}

/**************************************************************
Footer
**************************************************************/

#footer {
clear: both;
float: left;
width: 100%;
height: 5em;
margin-top: -5em;
}

#footer #bg {
position: relative;
height: 5em;
margin: 0 auto;
background: #49525B url(../images/bg/header.gif) repeat-x bottom left;
}

#footer #bg ul {
float: right;
margin: 3em 1em 0 0 !important;
margin: 3em 0.5em 0 0;
padding: 0;
}

#footer #bg ul li {
display: inline;
list-style: none;
}

#footer #bg ul li a {
float: left;
padding: 0 1em;

font: 400 1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;

color: #4D5760;
border-right: 1px solid #4D5760;
}

#footer #bg ul li a.last {
padding-right: 0;
border-right: 0;
}

#footer #bg ul li a:hover {
color: #6C0;
}

#footer #bg img {
position: absolute;
top: 6%;
left: 10px;
}

/**************************************************************
Icons specific to the colour theme
**************************************************************/

a.lightTheme img,
a.darkTheme img,
a.submitButton img {
width: 20px;
height: 20px;
vertical-align: middle;
}

a.lightTheme img {
background: url(../images/icons/light_light_theme.gif) no-repeat center center;
}

a.darkTheme img {
background: url(../images/icons/light_dark_theme.gif) no-repeat center center;
}

a.submitButton img {
background: url(../images/icons/light_submit.gif) no-repeat center center;
}

/**************************************************************
Posts
**************************************************************/

.post {
float: left;
width: 100% !important;
width: 99%;
position: relative;

margin-bottom: 1.5em;

border-bottom: 1px solid #CCCCCC;
}

.post .date {
position: absolute;
top: 0;
left: 5px;

width: 2.3em;
text-align: right;
}

.post .date .month {
text-transform: uppercase;
font: 700 1.0em arial, sans-serif;
color: #888;
}

.post .date .day {
display: block;
margin-top: -5px;
font: 700 2.1em arial, sans-serif;
color: #888;
}

.post .title {
display: block;
padding: 0 0 5px 0;

font-size: 1.2em;
font-weight: bold;
color: #586B7A;
}

.post p {
margin: 0 0 0 3.5em;
padding: 0 0 1em 1.2em;
border-left: 1px solid #CCCCCC;
}

/**************************************************************
Thumbnail Lists
**************************************************************/

ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}

ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}

a.thumb img {

border: 5px solid #ccc;
}

a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #668FA3;
}

a:hover.thumb {
background: none;
}

a.thumb span {
display: block;
margin-top: -5px !important;
margin-top: -2px;
}

/**************************************************************
Submenu Styles
**************************************************************/

ul.submenu1,
ul.submenu2 {
margin: 0 0 20px 0;
padding: 0;
}

ul.submenu1 li,
ul.submenu2 li{
margin: 0;
padding: 0;
list-style: none;
list-style-image: url(foo.gif); /* because IE is balls */
}

ul.submenu1 li a,
ul.submenu2 li a {
display: block;
height: auto !important;

/* Start hide from IE Mac \*/
height: 1%;
/* End hide from IE Mac */

padding: 1px 5px 1px 20px;
}

ul.submenu1 li a {
background: url(../images/bg/submenu1.gif) no-repeat 5px 50%;
}

ul.submenu1 a:hover {
color: #426F85;
background: #B3C6C4 url(../images/bg/submenu1.gif) no-repeat 5px 50%;
}

ul.submenu2 li a {
color: #426F85;
background: url(../images/bg/submenu2.gif) no-repeat 3px 50%;
}

ul.submenu2 a:hover {
color: #426F85;
background: #B3C6C4 url(../images/bg/submenu2.gif) no-repeat 3px 50%;
}

/**************************************************************
Generic Display
**************************************************************/

.block {
display: block;
}

.clear {
clear: both;
}

.marginRight {
margin-right: 15px;
}

.paddingLeft {
padding-left: 5px;
}

.paddingRight {
padding-right: 5px;
}

.floatLeft {
float: left;
}

.floatRight {
float: right;
}

.alignLeft {
text-align: left;
}

.alignRight {
text-align: right;
}

.alignTop {
vertical-align: top;
}

.alignMiddle {
vertical-align: middle;
}

.alignBottom {
vertical-align: bottom;
}

.lightBlueBg {
background-color: #EAF2F5;
}

.dark {
color: #353E47;
}

sejuma

Da kann man nicht viel mit anfangen, weil man noch wissen muss, wie das im HTML-Quelltext zusammengefügt ist. Ein Link wäre wirklich hilfreich.

Du kannst mal an diesen Stellen versuchen, den width-Wert zu erhöhen (aber ohne Gewähr!):

Code

/* Column widths */ 
.width { 
width: 776px; 
} 


.widthPad { 
width: 746px; 
}

nobie

hi, hier ist das Html layout. Leider hab ich die homepage noch nicht auf einem webspace sondern entwickele diese erstmal vollständig auf dem PC.

Ich hab deinen Vorschlag oben probiert, dabei verschiebt sich der Header nach links, der rechte Rand bleibt wie er ist.

/*********************************************************
HTML Elements
*********************************************************/

html,
body {
height: 100%;
}

body {
margin: 0;
padding: 0;
text-align: center;
background: url(../images/bg/light_body.gif) repeat-y top center;
font: 400 0.8em verdana, arial, sans-serif;
line-height: 100%;

color: #555;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px 0;
padding: 0;
}

h1 {
padding-bottom: 0.2em;

font: 400 1.6em arial, sans-serif;
color: #536C71;
border-bottom: 12px solid #ddd;
}

h2 {
font-size: 1.2em;
color: #586B7A;
}

h3 {
text-transform: uppercase;
font-size: 0.9em;
color: #5D6F73;
}

h4 {
font-size: 0.85em;
}

h5 {
font-size: 0.8em;
}

/* Needed to horizontally pad in a coloured container */
.horzPad h1,
.horzPad h2,
.horzPad h3,
.horzPad h4,
.horzPad h5,
.horzPad p {
padding-left: 5px;
padding-right: 5px;
}

/* Links */
a {
text-decoration: none;
color: #3B5D77;
}

a:hover {
color: #668FA3;
}

a img {
border: 0;
}

a img.border {
border: 1px solid #FC3307;
}

a:hover img.border {
/* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
border: 1px solid #668FA3 !important;
border: 1px solid #FC3307;
}

/* Images */
img.floatRight {
margin: 5px 0 10px 10px;
}

img.floatLeft {
margin: 5px 10px 10px 0;
}

/* Lists */
ul li {
list-style-image: url(../images/bg/submenu1.gif);
}

ol li {
font-weight: bold;
color: #668FA3;
}

ol li span {
font-weight: normal;
color: #444;
}

/* Blockquote */
blockquote {
margin: 0;
padding: 0 20px;
background: #E7F1F3;
border-top: 1px solid #AAD3DB;
border-bottom: 1px solid #AAD3DB;
}

/**************************************************************
Form Elements
**************************************************************/

form {
padding: 0;
margin: 0;
}

/* If you're finding the input elements get pushed down, increase the width */
label {
float: left;
width: 25%;
vertical-align: top;
}

input,
textarea,
select {
padding: 1px;
font: 400 1em verdana, sans-serif;
color: #999;
background: #EEE;
border: 1px solid #CCC;
}

input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
color: #000;
background: #E7F1F3;
border: 1px solid #888;
}

input.noBorder,
input:focus.noBorder,
input:hover.noBorder {
padding: 0;
border: 0;
}

input.button {
padding: 2px 5px;

font: 400 0.9em verdana, serif;
cursor: pointer;

color: #fff;
background: #FC3307;
border-width: 1px;
border-style: solid;
border-color: #FF7800 #691300 #691300 #FF7800;
}

input.radio {
background: none;
border: 0px;
}

sejuma

Der HTML-Quelltext wird benötigt.
Die CSS-Angaben allein nützen nichts.

nobie

hier ist der HTML Quelltext:

<!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" xml:lang="en"
lang="en">
<head>
<title></title>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<link rel="stylesheet" type="text/css"
href="css/layout.css" media="screen, projection, tv " />
<link rel="stylesheet" type="text/css"
href="css/html.css" media="screen, projection, tv " />
<style type="text/css">
.style2 {color: #627E9A}
.style3 {color: #62CC3C}
.style6 {color: #5C8096}
-->
</style>
</head>
<body>
<div id="content">
<div id="header" class="width">

</div>

<div id="menu" class="width">
<ul>
[*] http://onecol.html<span
style="color: rgb(255, 0, 0);"><span
style="color: rgb(51, 255, 51);"></span> </span><a
href="twocol_a.html" class="forum" onfocus="blur()"><span
class="title">Buchungsbeispiele</span> <span
class="desc style3"> </span> </a>
[*] <a href="contact.html" onfocus="blur()">
<span class="title">Bestellen</span>
<span class="desc"></span> </a>
[*] <a href="contact.html" onfocus="blur()">
<span class="title">Kontakt</span>
<span class="desc"></span> </a>
[/list]
</div>

</h2>
<ul class="thumbs">
[/list]
<span class="thumb"></span><span></span><span
class="thumb"></span>[url='']<span></span>[/url]<span
class="thumb"></span>[url='']<span></span>[/url]<span
class="thumb"></span>[url='']<span></span>[/url]<span
class="thumb"></span>[url='']<span></span>[/url]<span
class="thumb"></span>[url='']<span></span>[/url]<span
class="thumb"></span><a href="" class="thumb">
</a>
<ul class="thumbs">
[*] <span class="thumb"></span>[url='']<span> dfdfdfdfd</span>[/url]
[*]<big style="font-weight: bold;"><a
href="Funktionen.html">

</a> </big>
<li style="font-weight: bold;"><big>

</big>
<li style="font-weight: bold;"><big><a
href="Buchf%FChrung.html"><span
style="text-decoration: underline;"></span></a>

</big>

[/list]
</div>

</div>

<div class="floatRight width25 lightBlueBg horzPad">
<h2><span class="dark">Links</span></h2>
<ul class="submenu1">
[/list]
<ul class="submenu2">
[/list]
Bundesfinanzministerium

</div>
</div>
</div>

</body>
</html>

sejuma

Ist doch wie ich vermutet hatte:

bisher:

Code

/* Column widths */
.width {
width: 776px;
}

Wenn du diesen Wert erhöhst, wird die Seite breiter:

z.B.

Code

/* Column widths */
.width {
width: 900px;
}

Ggf. musst du dann noch andere Div's anpassen.

nobie

danke, ja die beiden Menüblocks werden breiter, aber wie ändere ich den Textblock.
Welche anderen divs meinst du? Auf was muß ich achten?

Ich hab withpad auch vergrößert, aber das hilft nur teilweise im Textblock.
Der Textblock ist das Problem, ich hab da drei Textspalten, wie muß ich die Spalten ändern?

nobie

ich habe das template Nautica05

siehe bei
http://max.limpag.com/nautica05-wordpress/

wie kann ich die blauen Seitenspalten verkleinern bzw den Textblock und die Spalten breiter machen? Ich brauche mehr Platz für Text und Grafik.

sejuma

Indem du dir mal darüber klar wirst, was der Quelltext bedeutet, also in welchen Elementen und an welchen Stelle welche Inhalte stehen.
Und diese Elemente kannst du dann im CSS-Style-Sheet entsprechend anpassen.

Es ist immer sinnvoll, einige HTML- und CSS-Kenntnisse zu haben wenn man eine Homepage betreiben will.

nobie

ich habe einige Kenntnisse und kann auch die Größe der drei Textspalten
ändern, aber wie kann ich die gesamten 100% des Textblocks erhöhen?
damit sich dieser über die blauen Seitenränder schiebt?

Design-Rand entfernen

Tags

Benutzer online in diesem Thema