layout.css Hilfe gesucht

TonyAlmeida

Hallo!
Ein Freund hat mir eine Website programmiert. Ich versuche mich gerade an einigen Korrekturen, da er die im Moment nicht durchführen kann.
Es gibt ein Problem mit dem Layout. Auf grossen Monitoren ist alles OK., doch auf unseren MacBooks hier zuhause ist das Header Bild breiter als der Rest der Seite. Ändere ich die WIDTH, verschiebt sich das Bild auch in der Höhe und passt nicht mehr ins Design.
Nun meine Bitte: Kann ich jemandem von Euch eine PN mit dem Link der Seite und der layout.css schicken?
Kurz anschauen und einschätzen, ob das ein grosses Problem ist, oder relativ einfach zu beheben ist.:roll:
Wäre toll.
Danke, Grüsse und einen sonnigen Restsonntag!!!!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

Poste den Link doch hier im Forum

TonyAlmeida

OK. Also, das Problem ist, dass auf allen Notebooks (die ich prbiert habe) das Header Foto breiter als der Rest der Seite wird. Ich bekomme unten einen Srollbalken.
Auf Desktop Rechnern habe ich das Problem nicht.
Ändere ich die WIDTH schiebt er mir das Design am unteren Fotorand zusammen.

http://www.dein-niestetal.de/Wordpress

Siehe layout.css unten. Einen sonnigen Montag und viele Grüsse
Danke Euch

Code

/* LAYOUT */
/* ----------------------------------------- */


/* Presentational classes generated by WordPress */
.aligncenter    { display: block; margin: 0 auto; }
.alignleft        { float: left; margin: 0 20px 20px 0; }
.alignright        { float: right; margin: 0 0 20px 20px; }
.wp-caption        { border: 1px solid #999; text-align: center; background: #eee; padding: 10px; margin: 10px; }


body{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11pt;
}
/*------ Header Style ------*/
#top_bg{
    width:auto;
    min-width:100%;
    height:100px;
    background:url(../images/head/streifen_oben.png) repeat-x;
    position:absolute;
    z-index:20;
    top:0;
}


#top_content{
    width:800px;
    margin:0 auto 0 auto;
}


#logo{
    float:left;
}


#social_media{
    float:right;
    margin:10px 0 0 0;
}


#head_image img{
    width:100%;
    min-width:100%;
}


#slogan{
    float:right;
    clear:both;
}


#eG_back{
    width:100%;
    background:url(../images/content/start/recent_bg.png) repeat;
    position:absolute;
    z-index:30;
    top:390px;
}


#eG{
    width:800px;
    margin:0 auto;
    text-align:right;
    font-family: DINEngschriftStd;
    font-weight: normal;
    font-style: normal;
    color:#ec7404;
    font-size: 16pt;
    padding-top:5px;
}


h1{
    font-family: DINEngschriftStd;
    font-weight: normal;
    font-style: normal;
    color:#ec7404;
    font-size:3em;
    top:200px;
    left:50%;
}
/*------ Header Style ------*/


/*------ Content Style ------*/
section{
    background:url(../images/content/content_bg.jpg) repeat;
    width:auto;
    min-width:100%;
    height:auto;
    min-height:100%;
    position:absolute;
    top:420px;
    padding-bottom:20px;
}


.content_800{
    width:800px;
    margin:0 auto;
}
/*------ Navigation ------*/
#menu-main-menu{
    list-style-type:none;
    padding:0;
    text-align:center;
}


#menu-main-menu li{
    display:inline;
}


.menu-item a{
    text-decoration:none;
    font-family: DINEngschriftStd;
    font-weight: normal;
    font-style: normal;
    font-size:20pt;
    letter-spacing:0.1em;
    color: #CCCCCC;
    text-shadow: 0 -1px 1px #666666, 0 1px 1px #FFFFFF;
}


.current-menu-item a{
    color:#79b51c;
}


#menu-item-392{
    margin-right:59px;
}


#menu-item-391{
    margin-right:59px;
}


#menu-item-390{
    margin-right:59px;
}


#menu-item-389{
    margin-right:59px;
}


#menu-item-388{
    margin-right:59px;
}
/*------ Navigation ------*/


/*------ Start ------*/
#recent_post{
    background:url(../images/content/start/recent_bg.png) repeat;
    width:800px;
    position:absolute;
    top:328px;
}


#recent_post a{
    text-decoration:none;
    font-family: DINEngschriftStd;
    font-weight: normal;
    font-style: normal;
    font-size:1.5em;
    color:#ec7404;
}


#recent_post ul{
    list-style-type:none;
}


h4/*CATEGORY*/{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    padding-left:40px;
}


.colum{
    width:220px;
    float:left;
    text-align:justify;
    -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
    font-size:11pt;
    margin:40px 0 0 0;
}


.colum_center{
    width:220px;
    float:left;
    margin:40px 69px 0 69px;
    text-align:justify;
    -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
    font-size:11pt;
}


.colum a{
    text-decoration:none;
    font-family: DINEngschriftStd;
    font-weight: normal;
    font-style: normal;
    font-size:16pt;
    color:#ec7404;
    letter-spacing:0.5pt;
}


.colum_center a{
    text-decoration:none;
    font-family: DINEngschriftStd;
    font-weight: normal;
    font-style: normal;
    font-size:16pt;
    color:#ec7404;
    letter-spacing:0.5pt;
}
/*------ Start ------*/


/*------ Aktuell ------*/
h2 a{
    text-decoration:none;
    color:#ec7404;
    font-family: DINEngschriftStd;
    font-weight: normal;
    font-style: normal;
    font-size:25pt;
}


h2 {
    text-decoration:none;
    color:#ec7404;
    font-family: DINEngschriftStd;
    font-weight: normal;
    font-style: normal;
    font-size:25pt;
}


.info{
    font-size:8pt;
}


.info a{
    text-decoration: none;
    color:#ec7404;
}


article p{
    font-size:11pt;
}


hr{
    color:#ec7404;
    background-color:#ec7404;
    margin:0 0 50px 0;
}
/*------ Aktuell ------*/
/*------ Team ------*/
table p{
    font-size:11pt;
}
/*------ Team ------*/
/*------ Kontakt ------*/
#map{
    width:550px;
    float:right;
    margin:0 10px 0 0;
}
#content_kontakt{
    width:240px;
    float:left;
}
/*------ Kontakt ------*/
/*------ Content Style ------*/


/*------ Footer ------*/
footer{
    width:100%;
    height:40px;
    position:fixed;
    z-index:20;
    bottom:0;
    background:#79b51c;
    color:#FFF;
}


#footer_content{
    width:800px;
    text-align: center;
    margin:0 auto;
    font-size:10pt;
}


#footer_content a{
    color:#FFF;
    text-decoration:none;
    font-size:10pt;
}
/*------ Footer ------*/
#social_media a{
text-decoration:none;
}

Alles anzeigen

TonyAlmeida

Hat geklappt....

TonyAlmeida

....das Einfügen der css in den Beitrag. Die Lösung des Problems noch nicht.

maxe

Das liegt daran, dass deine Header-Grafik 1500px breit ist.
Vermutlich musst du mal mit den width Angaben bei #head_image img rum testen.

TonyAlmeida

Oh. Danke Dir. Wo hast Du denn den Wert gefunden?
Alternativ zu dem Ändern der WIDTH Angaben, kann ich da auch das header Bild verkleinern und neu hochladen???
Wäre doch einfacher - zumindest für mich.

maxe

hab dir doch geschrieben, wo du die width Angaben ändern kannst.
Du kannst natürlich auch die Header-Grafik generell kleiner machen.

TonyAlmeida

Ja, schon klar. Wollte wissen, wo Du die 1500px Angabe gefunden hast. Wenn ich das Header Bild kleiner mache - welche Breite nehme ich denn? Der Rest der Seite hat doch kein festes Maß?

maxe

Ich habe mir die Header-Grafik angeschaut, die Grafik hat ja eine Breite ;-)
Mach sie so groß/klein wie du sie willst.

TonyAlmeida

Ich habe jetzt das Header Foto verkleinert. Bei 1400 passt es genau auf mein MacBook Air, weil es die Auflösung hat.
Bei meiner Tochter ist das Foto noch zu breit, weil die Auflösung nur 1280 ist.
Nun gibt es ja 2 Möglichkeiten:
Foto so verkleinern (welcher Wert? 960px?), dass vermutlich die meisten Displays die Seite gut anzeigen, oder es gibt eine css Einstellung, die das berücksichtigt. Diese zweite Lösung wäre mir natürlich lieber.
Gibt es Hilfe/Hoffnung für mich? http://www.dein-niestetal.de/Wordpress

/*------ Header Style ------*/
#top_bg{
width:auto;
min-width:100%;
height:100px;
background:url(../images/head/streifen_oben.png) repeat-x;
position:absolute;
z-index:20;
top:0;
}

#top_content{
width:800px;
margin:0 auto 0 auto;
}

#logo{
float:left;
}

#social_media{
float:right;
margin:10px 0 0 0;
}

#head_image img{
width:auto;
min-width:100%;
}

#slogan{
float:right;
clear:both;
}

#eG_back{
width:100%;
background:url(../images/content/start/recent_bg.png) repeat;
position:absolute;
z-index:30;
top:390px;
}

#eG{
width:800px;
margin:0 auto;
text-align:right;
font-family: DINEngschriftStd;
font-weight: normal;
font-style: normal;
color:#ec7404;
font-size: 16pt;
padding-top:5px;
}

h1{
font-family: DINEngschriftStd;
font-weight: normal;
font-style: normal;
color:#ec7404;
font-size:3em;
top:200px;
left:50%;
}
/*------ Header Style ------*/

TonyAlmeida

ich glaube es hat geklappt. ich habe dem head-image mit dem zusatz height die feste höhe vorgegeben. jetzt kontrolliere ich noch verschiedene auflösungen....

Willkommen! Melden Sie sich an oder registrieren Sie sich.

layout.css Hilfe gesucht

Jetzt mitmachen!