Zum Inhalt springen

Benötige Hilfe zu HTML/CSS Template

Blake

Von Blake
in Webdesign

 Teilen

Empfohlene Beiträge

Blake

Blake

Geschrieben
Geschrieben

Hi,

jetzt sitze ich schon fast eine Stunde spät auf'd Nacht vor einem Template herum und bearbeite es aktuell. Bis dato ist ja noch alles gut gegangen doch jetzt benötige ich Hilfe :(

(siehe Link) http://img529.imageshack.us/img529/5670/bsqy9.png

Auf'm Link erkennt man einen Pfeil, der zu einem grauen dünnen Balken zeigt welcher sich komplett oben befindet, solch etwas möchte ich gerne auch ganz unten an der Homepage haben und nicht so nen komisches Zeug.

Der untere graue dickere Kasten taucht immer nach dem Text auf was ich jedoch nicht möchte. Ich möcht es so haben, dass er standardmäßig bei einem Explorer genauso groß wie der obere auftaucht und die ganze Zeit sich unten befindet.

Gibt es da eine Lösung?

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Nintendo - Das inoffizielle Nintendo-Magazin</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="topPan">

<div id="ImgPan"><a href="index.html"><img src="images/logo.png" title="Coporate Profiles" alt="Coporate Profiles" width="201" height="52" border="0" /></a> </div>

<ul>

<li class="home">home</li>

<li><a href="#">book</a></li>

<li><a href="#">umfragen</a></li>

<li><a href="#">multimedia</a></li>

<li><a href="#">partner</a></li>

<li><a href="#">impressum</a></li>

</ul>

</div>

<div id="bodyPan">

<p class="toptextpadding">

Corporate Profiles is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and

proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your

tastes in any way you like. We only ask you to not remove <span>"Design by Template World"</span> and the link

Website Templates - Flash Templates - Web 2.0 Templates (Dreamweaver, Frontpage, Golive) - Template World! from the footer of the template.</p>

<p class="toptextpadding">If you are interested in seeing more of our free web template designs feel free to visit our website,

Template World. We intend to add at least 25 new free templates in the coming month.</p>

<p class="more"><a href="#">read more</a></p>

Es war einmal eine Witwe, die hatte zwei Töchter: die Ältere glich ihr so sehr in ihrem Wesen und in ihrem Äußeren, daß man bei ihrem

Anblick die Mutter zu sehen glaubte. Beide waren sie so widerwärtig und so hochmütig, daß man nicht mit ihnen auskommen konnte. Die jüngere

dagegen war in ihrer Sanftmut und Freundlichkeit das wahre Ebenbild ihres Vaters; darüber hinaus war sie eines der schönsten Mädchen, das man

sich denken konnte. Wie man nun gemeinhin sein Ebenbild liebt, so war diese Mutter ganz vernarrt in ihre ältere Tochter und hegte gleichzeitig

eine tiefe Abneigung gegen die jüngere. Sie ließ sie in der Küche essen und ohne Unterlaß arbeiten.

<br><br>

</div>

</div>

</div>

<div id="footermainPan">

<div id="footerPan">

<p class="copyright">

<div id="bodyPan">

<p class="more"><a href="#">read more</a></p>

</div>

</p>

<ul class="templateworld">

<li>Design by:</li>

<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>

</ul>

</div>

</div>

</body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen
Blake

Blake

Geschrieben
  • Autor
Geschrieben

Zuviel Zeichen auf einmal, deshalb Doppelpost, sry

style.css[/b9]

/* CSS Document */

body{padding:0px; margin:0px; background:url(images/mainbg.gif) 0 0 repeat-x #fff; color:#666; font:14px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;}

div, p, ul, h2, img{padding:0px; margin:0px;}

ul{list-style-type:none;}

a{background:#fff; color:#000; text-decoration:none;}

a:hover{background:#fff; color:#666; text-decoration:underline;}

/*----TOP PANEL----*/

#topPan{width:778px; height:87px; position:relative; margin:0 auto;}

#topPan #ImgPan{width:229px; height:52px; background:#fff; color:#666; position:absolute; top:35px; left:0px; padding:0 0 0 35px;}

#topPan #ImgPan img{width:201px; height:60px;}

#topPan ul{width:468px; height:32px; position:absolute; top:43px; right:45px;}

#topPan ul li{width:78px; height:32px; float:left;}

#topPan ul li a{width:76px; height:32px; display:block; background:url(images/topmenu-normal.jpg) 0 0 no-repeat #F5F4F4; color:#666; text-decoration:none; font-size:12px; font-weight:bold; text-align:center; line-height:32px; margin:0 2px 0 0;}

#topPan ul li a:hover{background:url(images/topmenu-hover.jpg) 0 0 no-repeat #F5F4F4; color:#fff; text-decoration:none;}

#topPan ul li.home{background:url(images/topmenu-hover.jpg) 0 0 no-repeat #F5F4F4; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; text-align:center; line-height:32px;}

/*----/TOP PANEL----*/

/*----BODY PANEL----*/

#bodyPan{width:689px; position:relative; margin:0 auto; text-align:justify; }

#bodyPan p.toptextpadding{padding:25px 0 0;}

#bodyPan p span{background:#fff; color:#D20039;}

#bodyPan p.more{width:81px; height:22px; display:block; margin:0 0 0 606px; background:url(images/more-bg.gif) 0 0 no-repeat;}

#bodyPan p.more a{width:70px; height:22px; display:block; background:url(images/arrow1.gif) 1% 60% no-repeat; line-height:22px; text-decoration:none; padding:0 0 0 11px;}

#bodyPan p.more a:hover{background:url(images/arrow2.gif) 1% 60% no-repeat; text-decoration:none;}

/*----Body Middle Panel----*/

#bodyMiddlePan{width:689px; position:relative; margin:0 auto;}

/*----Middle Left Panel----*/

#MiddleLeftPan{width:232px; float:left;}

#MiddleLeftPan p{padding:14px 0 0; line-height:18px;}

#MiddleLeftPan p.largegraytext{font-size:18px;}

#MiddleLeftPan p.more{width:81px; height:22px; display:block; margin:15px 0 0 145px; background:url(images/more-bg.gif) 0 0 no-repeat; padding:0px;}

#MiddleLeftPan p.more a{width:70px; height:22px; display:block; background:url(images/arrow1.gif) 1% 60% no-repeat; line-height:22px; text-decoration:none; padding:0 0 0 11px;}

#MiddleLeftPan p.more a:hover{background:url(images/arrow2.gif) 1% 60% no-repeat; text-decoration:none;}

#MiddleLeftPan p.chat{width:232px; height:70px; padding:14px 0 36px;}

#MiddleLeftPan p.chat a{width:232px; height:70px; display:block; background:url(images/24hours.gif) 0 0 no-repeat; text-indent:-20000px;}

#MiddleLeftPan p.chat a:hover{background:url(images/24hours.gif) 0 0 no-repeat; text-indent:-20000px;}

#MiddleLeftPan h2{width:210px; height:50px; display:block; background:url(images/icon1.jpg) 100% 0 no-repeat #fff; color:#D20039; border-bottom:1px dashed #BDB9B9; font-size:24px; line-height:22px; padding:0 20px 0 0;}

#MiddleLeftPan h2 span{background:#fff; color:#545454; font-weight:bold; font-size:14px; text-transform:uppercase;}

/*----/Middle Left Panel----*/

/*----Middle Right Panel----*/

#MiddleRightPan{width:384px; float:left; padding:0 0 0 73px;}

#MiddleRightTopPan{width:384px; height:203px; background:url(images/image1.jpg) 0 100% no-repeat; padding:29px 0 0; margin:0 0 40px 0;}

#MiddleRightTopPan p.fresh{width:108px; height:24px; display:block; margin:0 0 0 208px; font-size:20px; text-transform:uppercase;}

#MiddleRightTopPan p.business{width:170px; height:20px; display:block; margin:0 0 0 210px; background:url(images/dotline.gif) 0 100% repeat-x #fff; color:#6BB600; font-size:27px; text-transform:uppercase; text-align:right;}

#MiddleRightPan h2{width:380px; height:20px; background:url(images/dotline.gif) 0 100% repeat-x #fff; color:#6BB600; font-size:24px;}

#MiddleRightPan p{padding:8px 0 0;}

#RightListfastPan{width:200px; float:left; padding:10px 0 0;}

#RightListfastPan ul{width:200px;}

#RightListfastPan ul li{width:200px; height:20px; float:left;}

#RightListfastPan ul li a{width:190px; line-height:20px; background:url(images/bullet.gif) 0 6px no-repeat #fff; color:#666; text-decoration:underline; padding:0 0 0 18px;}

#RightListfastPan ul li a:hover{background:url(images/bullet-hover.gif) 0 6px no-repeat #fff; color:#000; text-decoration:underline;}

#RightListnextPan{width:180px; float:left; padding:10px 0 0;}

#RightListnextPan ul{width:180px;}

#RightListnextPan ul li{width:180px; height:20px; float:left;}

#RightListnextPan ul li a{width:160px; line-height:20px; background:url(images/bullet.gif) 0 6px no-repeat #fff; color:#666; text-decoration:underline; padding:0 0 0 18px;}

#RightListnextPan ul li a:hover{background:url(images/bullet-hover.gif) 0 6px no-repeat #fff; color:#000; text-decoration:underline;}

/*----/Middle Right Panel----*/

/*----Footer Panel----*/

#footermainPan{background:url(images/footerbg.gif) 0 0 repeat-x #F4F4F4; color:#212121; position:relative; margin:0 auto; height:133px; clear:both;}

#footerPan{width:689px; position:relative; margin:0 auto; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal; padding:15px 0 0;}

#footerPan ul{width:450px; height:20px; position:relative; margin:0 auto;}

#footerPan li{float:left; }

#footerPan ul li a{padding:0 10px 0; color:#212121; background:#F4F4F4; text-decoration:none;}

#footerPan ul li a:hover{text-decoration:underline;}

#footerPan ul.templateworld{width:190px; background:#F4F4F4; color:#212121; display:block; position:relative; margin:0 auto; }

#footerPan ul.templateworld li{height:20px;}

#footerPan ul.templateworld li a{background:#F4F4F4; display:block; color:#212121; text-decoration:none; padding:0px;}

#footerPan ul.templateworld li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:250px; background:#F4F4F4; color:#212121; position:relative; margin:0 auto;}

#footerPanhtml{width:64px; height:19px; display:block; position:absolute; top:73px; left:270px;}

#footerPanhtml a{width:59px; height:18px; background:#fff; color:#6A6A6A; border:1px solid #B6B6B6; display:block; position:absolute; top:0px; left:0px; line-height:19px; text-align:center; font-weight:bold; text-transform:uppercase; text-decoration:none;}

#footerPanhtml a:hover{background:#D2D0D0; color:#353427; text-decoration:none;}

#footerPancss{width:64px; height:19px; display:block; position:absolute; top:73px; left:336px;}

#footerPancss a{width:49px; height:18px; background:#fff; border:1px solid #B6B6B6; color:#6A6A6A; display:block; position:absolute; top:0px; left:0px;line-height:19px; text-transform:uppercase; font-weight:bold; text-align:center; text-decoration:none;}

#footerPancss a:hover{background:#D2D0D0; color:#353427; text-decoration:none;}

bzw. hier is des ZIP

template.zip

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...