php - Integreret header - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php html kode

Bruger #17248 @ 04.06.12 11:21

Hej igen folkens.

Jeg kunne godt tænke mig at lave en content boks, der ser ud som denne:
http://flammen-odense.dk/

Pt. Har jeg fået lavet en helt firkantet content-boks, men kunne godt tænke mig, at få lavet en "ekstra boks" til logoet - altså, præcis som på flammens hjememside.

På forhånd tak.

7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #15562 @ 04.06.12 15:47

118

Kan se de bare har lavet et top banner i photoshop

Top banner

Deres kode for det

CSS kode

 imHeader {
   background-color:transparent;
   background-image:url(http://flammen-odense.dk/style/top.png);
   background-position:0 0;
   background-repeat:no-repeat no-repeat;
   height:207px;
   margin-bottom:1px;
 }

Bruger #16325 @ 04.06.12 23:58

Se her, det kan være en måde at løse det på.
Jeg har ikke brugt meget tid på at tænke over den videre brugbarhed, har bare sat det op som et eksempel.

forsiden:

HTML kode

 <!DOCTYPE html>
     <html>
         <head>
             <TITLE></TITLE>
             <meta charset="utf-8" />
             <meta="keywords" content="" />
             <meta="description" content="" />
             <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
         </head>
         <body>
             <div id="ramme">
                 <div id="logo_wrapper">
                     <div id="logo">
                     </div>
                     <div id="top_border_gfx">
                      I denne div vil du skulle bruge noget grafik for at kunne lave det skr&aring; stykke af borderen.
                     </div>
                 </div>
                 <div id="content_wrapper">
                     <div id="content"> Her kan du skrive indhold p&aring; din side</div>
                 </div>
             </div>
         </body>
     </html>

Og det css der hører til:

CSS kode

 #content_wrapper 
 {
     margin: 0 auto 0 auto;
     width: 1000px;
     height: 600px;
     border: 2px solid black;
     border-radius: 25px;
     border-top-left-radius: 0;
     background-color: black;
     display: block;
 }
 
 #content
 {
     padding: 15px;
     color: white;
 }
 
 #logo_wrapper
 {
     display: block;
     height: 100px;
     width: 1004px;
     margin: 50px auto 0 auto;
     border: 0;
 }
 
 #logo
 {
     height: 100px;
     width: 150px;
     float: left;
     display: inline-block;
     border: 2px solid black;
     border-top-left-radius: 25px;
     background-color: black;
 }
 
 #top_border_gfx
 {
     display: inline-block;
     float: left;
     height: 90px;
     width: 400px;
     background-color: black;
     color: white;
     border: 1px solid white;
     padding: 5px;
 }

Jeg har bare lavet en ny div (top_border_gfx) som skal have noget grafik for at få den skrå streg ned i border kanten.

En anden mulig løsning ville være at glemme top borderen og lave en stor afrunding af det ene hjørne i logo div'en.

eksempel:

HTML kode

 <!DOCTYPE html>
     <html>
         <head>
             <TITLE></TITLE>
             <meta charset="utf-8" />
             <meta="keywords" content="" />
             <meta="description" content="" />
             <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
         </head>
         <body>
             <div id="ramme">
                 <div id="logo_wrapper">
                     <div id="logo">
                     </div>
                 </div>
                 <div id="content_wrapper">
                     <div id="content"> Her kan du skrive indhold p&aring; din side</div>
                 </div>
             </div>
         </body>
     </html>

Og css:

CSS kode

 #content_wrapper 
 {
     margin: 0 auto 0 auto;
     width: 1000px;
     height: 600px;
     border: 2px solid black;
     border-radius: 25px;
     border-top-left-radius: 0;
     background-color: black;
     display: block;
 }
 
 #content
 {
     padding: 15px;
     color: white;
 }
 
 #logo_wrapper
 {
     display: block;
     height: 100px;
     width: 1004px;
     margin: 50px auto 0 auto;
     border: 0;
 }
 
 #logo
 {
     height: 100px;
     width: 650px;
     float: left;
     display: inline-block;
     border: 2px solid black;
     border-top-left-radius: 25px;
     border-top-right-radius: 110px;
     background-color: black;
 }

Håber du får noget ud af det.

Indlæg senest redigeret d. 05.06.2012 00:04 af Bruger #16325

Bruger #16325 @ 04.06.12 11:54

For at lave en boks som den du linker til skal du gøre det grafisk.

Du laver en content-boks som den du snakker om, den helt firkantet (evt kig på css3 for at runde hjørnerne) og så vil du skulle lave en ny boks hvor der skal være det stykke grafik som laver det grafik til logoet, samt den border der er på.

På siden du linker til er logoet, med border og den øverste border til den store boks et stykke grafik.

En løsning ville være at lave en div med plads til logo og top-border, en div til content, hvor du sætte left, right og bottom border.
Alternativt, hvis du skal bruge grafik til det hele, så lav en div til hvert stort stykke grafik.

Bruger #17248 @ 04.06.12 12:04

@Martin

Pt. ser det således ud.

http://102830m11fa.sub.ots.dk/brygselv/index.php

- Så der skal altså laves en ekstra div, som så skal styles og smides ovenpå min content-boks? Jeg har ikke mulighed for bare at style min contentboks så den får den "ekstra kant" ovenpå?

Bruger #16325 @ 04.06.12 15:44

Du kan sagtens lave den øverste kant også, men du bliver nødt til at lave et stykke grafik til den skrå kant. Så vidt jeg ved så har css3 endnu ikke implementeret nogen måde at lave en border på tværs endnu.

Derudover skal du huske at fjerne den border-radius du har i øverste venstre hjørne.

Personligt havde jeg lavet det i grafik så længe at alle browsere ikke understøtter css 3.

Bruger #17248 @ 05.06.12 12:28

Det er fanme lækkert, at i gider hjælpe så meget.

Jeg er dog ikke helt med på, hvad den nemmeste fremgangsmåde ville være for en rookie for mig? - Mht. de skrå hjørner har jeg dem da allerede implementeret? Så det er jo intet problem.

Problemet ligger udelukkende i den header som de har på flammen, hvilket jeg synes ser ret blæret ud.

Ville det nemmeste for mig bare være, at lave et stykke grafik og smide det på som header? - Hvis jeg vælger denne option, hvordan får jeg så lavet mit logo interaktivt så man kommer tilbage på "hjem", hvis man trykker på det?

Ked af, hvis det blev lidt rodet, men alt det her hjemmeside-kodning flyver lidt rundt i hovedet på mig lige nu.

Bruger #16325 @ 05.06.12 16:09

Ok, her er et forslag til hvordan det kan gøres nemt. Der er mange måder at gøre det på.

Du laver en div som du placerer i top banneren, denne div indeholder logoet. Og du smider div'en ind i et a tag som du linker til forsiden at sitet.

Hvis du vil have det på en anden måde må du lige sige til.

forsiden:

HTML kode

 <!DOCTYPE html>
     <html>
         <head>
             <TITLE></TITLE>
             <meta charset="utf-8" />
             <meta="keywords" content="" />
             <meta="description" content="" />
             <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
         </head>
         <body>
             <div id="ramme">
                 <div id="logo_wrapper">
                     <div id="logo">
                         <a href="index.html">
                             <div id="logo_image">
                             Her er der en anden div som indeholder logo'et
                             </div>
                         </a>
                     </div>
                 </div>
                 <div id="content_wrapper">
                     <div id="content"> Her kan du skrive indhold p&aring; din side</div>
                 </div>
             </div>
         </body>
     </html>

css:

CSS kode

 body
 {
     background-color: red;
 }
 
 #content_wrapper 
 {
     margin: 4px auto 0 auto;
     width: 1000px;
     height: 600px;
     border: 2px solid black;
     border-radius: 25px;
     border-top-left-radius: 0;
     background-color: black;
     display: block;
     opacity:0.8; 
 }
 
 #content
 {
     margin: 20px auto 0 auto;
     height: 520px;
     width: 900px;
     padding: 15px;
     color: white;
 }
 
 #logo_wrapper
 {
     display: block;
     height: 100px;
     width: 1004px;
     margin: 50px auto 0 auto;
     border: 0;
 }
 
 #logo
 {
     height: 100px;
     width: 650px;
     float: left;
     display: inline-block;
     border: 2px solid black;
     border-top-left-radius: 25px;
     border-top-right-radius: 90px;
     background-color: black;
     opacity:0.8;
 }
 
 #logo_image
 {
     background-color: transparent;
     background-image: URL('logo.png');
     background-position: top left;
     background-repeat: no-repeat;
     height: 132px;
     width: 200px;
     margin-left: 20px;
     margin-top: -40px;
     text-align: center;
     padding-top: 80px;
 }
 
 #top_border_gfx
 {
     display: inline-block;
     float: left;
     height: 90px;
     width: 400px;
     background-color: black;
     color: white;
     border: 1px solid white;
     padding: 5px;
 }

Sådan ser det ud, så slipper du for selv at sætte det ind.
Eksempel

Håber det giver dig noget.

Indlæg senest redigeret d. 05.06.2012 16:20 af Bruger #16325

Integreret header

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler