Suche Hilfe für Layout

Sung · 04/20/2013, 22:53

Hallo da draussen,

Und zwar habe ich ein Layout entworfen nach meinen Vorstellungen.
Habe diese bereits per Photopshop gesliced und eingebettet.

Jedoch funktioniert das ganze nicht wie ich mir das Vorstelle (keine div-tags, kein css, kein Auto-Resolution resize) und nun suche ich bitte hilfe.

Kann mir jemand mein Layout korrekt slicen und nach aktuellem Homepage Standart einbetten, damit ich einfach nur noch Scripten muss?
Wäre super nett von euch !

Hier meine Layout PSD.

Mozo_ · 04/20/2013, 23:06

Durch Photoshop Slicen bekommst du nur das ganze in einer, ich nenne es mal, Tabellen anpassung.
Für Div anpassung musst du es selbst machen mit css usw

Sung · 04/20/2013, 23:46

Genau das beherrsche ich leider nicht

Kann mir dabei jemand helfen oder ein sehr gutes tutorial nennen womit ichs sicher hinbekomme?

.StarSplash · 04/21/2013, 14:46

Google, es gibt verschiedene gute Tutorials,

hier solltest du mal vorbeischauen.

Psslices kannst du gelinde gesagt in die Tonne kloppen

Sung · 04/22/2013, 11:44

Also ich habe nun via <div> und CSS ein Layoutbasic erstellt so wie ich es ungefähr haben will.
Nun stoße ich auf ein problem das ich irgendwie nicht lösen kann.
Und zwar habe ich einen festen Header Background per CSS festgelegt.
Möchte darüber zwei Buttons setzten, einmal FB und einmal Twitter. Jeweils Links unten, Rechts unten ausgerichtet an der festen größe des headers (280px) (man sieht die grüne fläche)

Jedesmal wenn ich es versuche mit bottom:0px; auszurichten, tut sich garnichts.
Es bleibt dauerhaft links oben in der ecke kleben.

Website: Aktueller Code

Hier mein Code:

CSS

Code:

@charset "utf-8";
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	background-color: #000000;
	margin: 0;
	padding: 0;
	color: #000;
}
a img {
	border: none;
}
.container {
	width: 100%;
	max-width: 1260px;
	min-width: 780px;
	background-color: #000000;
	margin: 0 auto; 
}

.header {
	background-color: #F0A;
	margin-bottom: 5px;
	width: 100%;
	height: 280px;
	background-image:url(Bilder/Header.png)
	
}
.sidebar1 {
	float: left;
	width: 25%;
	background-color: #93A5C4;
	margin-right: 5px;
	background-color:#0A0;
	background-image:url(Bilder/Daniel-Neu-Perfekt_18.png)
}
.topbar {
	background-color: #FFF;
	widht: 20%;
	margin-bottom: 5px;
}
ul.nav {
	list-style:none
}
.content {
	padding: 10px 0;
	width: 48.8%;
	float: left;
	margin-bottom: 5px;
	margin-right: 5px;
	background-color:#0F0;
	background-image:url(Bilder/Daniel-Neu-Perfekt_16.png)
}
.sidebar2 {
	float: right;
	width: 25%;
	background-color: #93A5C4;
	background-color:#0A0;
	background-image:url(Bilder/Daniel-Neu-Perfekt_18.png)
}
.footer {
	background-color: #0FF;
	position: relative;
	clear: both;
	background-image: url(Bilder/Daniel-Neu-Perfekt_28.png);
	font-size: 9px;
}

HTML

Code:

<!DOCTYPE html PUBLIC "
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Daniel Basic</title>
    <link href="HTML5_thrColFixHdr.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
        <style>
        .content { margin-right: -1px; } 
        ul.nav a { zoom: 1; } 
        </style>
    <![endif]-->
</head>

<body>

<div class="container">

  <div class="header">LEERFLÄCHE</div>
  
  <div class="topbar"><div>
  <img src="Bilder/Daniel-Neu-Perfekt_09.png" /><img src="Bilder/Daniel-Neu-Perfekt_10.png" /><img src="Bilder/Daniel-Neu-Perfekt_11.png" /><img src="Bilder/Daniel-Neu-Perfekt_12.png" /><img src="Bilder/Daniel-Neu-Perfekt_13.png" />
  <div></div></div><div></div><div></div><div></div></div>
  
  <div class="sidebar1">
  
  <div><img src="Bilder/Daniel-Neu-Perfekt_08.png" width="100%" height="33" /></div>
  
        <ul class="nav">
          <li><a href="#">Hyperlink 1</a></li>
        </ul>
    
     <div><img src="Bilder/Daniel-Neu-Perfekt_08.png" width="100%" height="33" /></div>
     
        <ul class="nav">
          <li><a href="#">Hyperlink 1</a></li>
        </ul>
  </div>
  
  <div class="content">
        <p>CONTENT</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>test</p>
        <p>test</p>
  </div>
  
  <div class="sidebar2">
  
  <div><img src="Bilder/Daniel-Neu-Perfekt_08.png" width="100%" height="33" /></div>
        <ul class="nav">
          <li><a href="#">Hyperlink 1</a></li>
        </ul>
        
    <div><img src="Bilder/Daniel-Neu-Perfekt_08.png" width="100%" height="33" /></div>
            <ul class="nav">
              <li><a href="#">Hyperlink 1</a></li>
            </ul>
  </div>
  
  <div class="footer"></div>
</div>
</body>
</html>