html - Hvid boks omkring indhold - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css html

Bruger #17072 @ 14.05.12 17:40

Hej
Jeg er igang med at redesigne mit site og i den forbindelse er jeg stødt på et lille problem, da jeg gerne vil have de to indholds divs content og ref til at være lukket inde i hvide bokse med runde hjørner.

HTML kode

 <div id="container">
             <div id="logo"><img src="images/logo.png" /></div>
             <div class="nav"><?php include 'inc/menu.php'; ?></div>
             <div id="wrapper"><img src="images/wrapper_top.png" />
             <div id="ref"><a href="referencer.php"><img src="images/web/web.png" /></a><br /><br/></div>
             <div id="content">
                 <h1>Velkommen</h1>
                 <h2>Webløsninger</h2>
                 <p>Har du en idé til en hjemmeside, er der fejl på din side som du ønsker rettet?
                 <br/>Leder du efter en freelance webdesigner der laver webløsninger for både store og små virksomheder, samt privatpersoner?</p>
                 <p>Jeg arbejder freelance og derfor leverer jeg altid konkurrencedygtige priser, direkte og hurtig kommunikation mellem dig som kunde og mig</p>
                 <p>Netop det at jeg er freelance betyder at du som kunde ikke skal igennem en eller anden langvarrig samtale med en medarbejder i kundeservice, fordi kundeservice-personale <u>ikke</u> eksisterer hos freelancere.</p>
                 <p>Det kan godt være at jeg som freelancer ikke arbejder hos et firma, men det har ingen betydning for kavliteten af mine produkter.<br />Jeg leverer samme professionelle kvalitet og service som man kan forvente af en virksomhed.<br/>Dertil arbejder jeg til en meget fordelagtig pris og betaling for mit arbejde fastlægges individuelt pr. kunde.</p>
                 <p>Lyder det jeg har fortalt som noget for <b>DIG</b>, så tøv ikke med at kontakte mig!</p>
             </div>
             <img src="images/wrapper_bottom.png" />
             </div>
             <div style="clear:both;"></div>
             <div id="footer"><?php include 'inc/footer.php'; ?></div>
         </div>

Hjørnerne har jeg fået på plads, men hvis i kigger på dette screenshot, så er der stadig noget galt.
Jeg synes ikke rigtigt at jeg kan få den til at rykke væk fra kanten, så det giver lidt luft, og så har jeg en masse huller hvor den grå baggrund går igennem. Jeg kunne sagtens lave en baggrund hvor grafikken var lavet på baggrunden, dog er problemet det at jeg på nogle sider har rigtig meget indhold og derfor vil det ikke passe ind i boksen.
Hvordan får jeg tilpasset mine divs, så det kommer til at passe sammen.
Og så skal lige have min css-fil for at det overhovedet kam lade sig gøre at hjælpe mig.'

CSS kode

 #container {
     margin: auto;
     width: 1100px;
     background-image: url(../images/container.png);
     background-repeat: repeat-y;
 }
 #wrapper {
     width: 1000px;
     margin: auto;
     
 }
 #content {
     padding-top: 20px;
     padding-left: 10px;
     padding-right: 5px;
     width: 675px;
     background-color: #FFF;
 }
 #ref {
     width: 30%;
     float: right;
     text-align: right;
     padding-right: 5px;
     padding-top: 35px;
 }
 #logo {
     background-color: #FFF;
 }
 #logo img {
     width: 1000px;
     height: 100px;
     text-align: center;
 }

Jeg er sikker på at det med lethed kunne lade sig gøre at løse problemet med CSS3, dog er målgruppen til sitet den del af befolkningen, som stadig sidder med IE8 på windows xp, og så er det mindre virksomheder, hvor hele deres netværk er bygget omkring windows xp, og der er meget lille sandsynlighed for at de har en HTML5 & CSS3 kompatibel browser, så derfor vil jeg helst holde det i CSS2.1, hvis det er muligt.

8 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 10 karma

Sorter efter stemmer Sorter efter dato

Bruger #16977 @ 14.05.12 21:34

Her, jeg har tyndet lidt ud i din HTML, rykket rundt med #content og #ref så indholdet kommer først i koden:

HTML kode

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
 
     <title>Webløsinger og teknisk support - KHIT</title>
     <link href="style/style.css" rel="stylesheet" type="text/css" />
 
 </head>
 <body>
     <div id="container">
     <div id="logo">LOGO HER</div>
     <div class="nav">Navigation her</div>
     
     <div id="wrapper">
         <div id="content">
              <h1>Velkommen</h1>
              <h2>Webløsninger</h2>
              <p>Har du en idé til en hjemmeside, er der fejl på din side som du ønsker rettet?
              <br/>Leder du efter en freelance webdesigner der laver webløsninger for både store og små virksomheder, samt privatpersoner?</p>
              <p>Jeg arbejder freelance og derfor leverer jeg altid konkurrencedygtige priser, direkte og hurtig kommunikation mellem dig som kunde og mig</p>
              <p>Netop det at jeg er freelance betyder at du som kunde ikke skal igennem en eller anden langvarrig samtale med en medarbejder i kundeservice, fordi kundeservice-personale <u>ikke</u> eksisterer hos freelancere.</p>
              <p>Det kan godt være at jeg som freelancer ikke arbejder hos et firma, men det har ingen betydning for kavliteten af mine produkter.<br />Jeg leverer samme professionelle kvalitet og service som man kan forvente af en virksomhed.<br/>Dertil arbejder jeg til en meget fordelagtig pris og betaling for mit arbejde fastlægges individuelt pr. kunde.</p>
              <p>Lyder det jeg har fortalt som noget for <b>DIG</b>, så tøv ikke med at kontakte mig!</p>
         </div>
         <div id="ref"><a href="referencer.php">REF!!</a><br /><br/></div>
 
     </div>
     <div style="clear:both;"></div>
     <div id="footer">Footer her</div>
     </div>
 </body>
 </html>

Og så har jeg fikset de mellemrum der er og gjort brug at en sprite til at lave de runde hjørner:

CSS kode

 /***Global*****/
  body {
      font-family: Arial;
      font-size: 12px;
      background-color: gray;
  }
  
 /* Styles til test */
 #footer,
 #logo,
 .nav {
      font-size: 4em;
      margin: 10px 0;
 }
 #ref {
      font-size: 4em;
      background-color: pink;
 }
  /***Global Off******/
  /****DIV***********/
  #container {
      margin: auto;
      width: 1100px;
      background-image: url(../images/container.png);
      background-repeat: repeat-y;
  }
 
  #wrapper {
      width: 1000px;
      margin: 0 auto;
      
  }
  #content {
      float: left;
      padding: 20px 10px;
      width: 675px;
      background-color: #fff;
      position: relative;
      margin-bottom: 20px;
  }
 
 #content:before, 
 #content:after {
      content: "";
      background: transparent url(../img/round-top-bottom.png) left top no-repeat;
      position: absolute;
      left: 0;
      width: 695px;
      height: 14px;
      display: block;
 }
 #content:before {
      top: 0;
 }
 #content:after {
      background-position: 0 -15px;
      bottom: -14px;
 }
 
  #content h1 {
      text-align: center;
  }
 
  #ref {
      width: 270px;
      float: right;
      padding-right: 5px;
      padding-top: 35px;
  }
  #logo {
      background-color: #FFF;
  }
  
  #footer {
      border: 1px solid #000;
      background-color: #FFF;
  }
  /***End of CSS***/

Det er ikke en speciel fleksibel model, da billedet med de runde hjørner faktisk tvinger dit layout til at være en fast bredde, men sådan som jeg ser dit eksempel indtil videre, så ser det heller ikke ud til at du går efter noget fleksibelt

Du kan se eksemplet her: fixed mellemrum

Edit: Det virker ned til IE8 med pseudo elementer (before/after)

Indlæg senest redigeret d. 14.05.2012 21:38 af Bruger #16977

Bruger #15754 @ 14.05.12 18:26

989

Smid et link, jeg er ret sikker på det har noget og gøre med en margin eller padding på nogle af dine elementer. Nu kan jeg ikke se style på henholdvis dit h1 og p tag.

Bruger #17072 @ 14.05.12 18:31

152

Siden er ikke online nogen steder, da den stadig er under udvikling, og det kun er en beskeden del jeg har lavet. Du kan få hele css-filen.

CSS kode

 /***Global*****/
 body {
     font-family: Arial;
     font-size: 12px;
 }
 h1 {
     text-align: center;
 }
 /***Global Off******/
 /****DIV***********/
 #container {
     margin: auto;
     width: 1100px;
     background-image: url(../images/container.png);
     background-repeat: repeat-y;
 }
 #wrapper {
     width: 1000px;
     margin: auto;
     
 }
 #content {
     padding-top: 20px;
     padding-left: 10px;
     padding-right: 5px;
     width: 675px;
     background-color: #FFF;
 }
 #ref {
     width: 30%;
     float: right;
     text-align: right;
     padding-right: 5px;
     padding-top: 35px;
 }
 #logo {
     background-color: #FFF;
 }
 #logo img {
     width: 1000px;
     height: 100px;
     text-align: center;
 }
 /*****DIV Off******/
 /****Footer****/
 #footer {
     border-top: #000;
     border-top-style: solid;
     background-color: #FFF;
     float: end;
 }
 /***End of CSS***/

Og hvis det er til nogen hjælp, så kan du også få hele HTML-koden

CSS kode

 <!DOCTYPE html>
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <meta name="keywords" content="hjemmeside, web, tenknisk support, webløsninger, freelance"/>
         <meta name="description" content="Skal du have lavet en hjemmeside eller skal der foretages andet web-relateret arbejde på dit site? Mangler du teknisk support på højt niveau uden at det koster en bondegård? Som freelancer kan jeg tilbyde professionel kvalitet og service til meget konkurrencedygtige priser"/>
         <title>Webløsinger og teknisk support - KHIT</title>
         <link href="style/style.css" rel="stylesheet" type="text/css" />
         <style media="all" type="text/css">@import "menu/menu_style.css";</style>
 <!--[if IE]>
     <style media="all" type="text/css">@import "menu/ie.css";</style>
 <![endif]-->
     </head>
     <body>
         <div id="container">
             <div id="logo"><img src="images/logo.png" /></div>
             <div class="nav"><?php include 'inc/menu.php'; ?></div>
             <div id="wrapper"><img src="images/wrapper_top.png" />
             <div id="ref"><a href="referencer.php"><img src="images/web/web.png" /></a><br /><br/></div>
             <div id="content">
                 <h1>Velkommen</h1>
                 <h2>Webløsninger</h2>
                 <p>Har du en idé til en hjemmeside, er der fejl på din side som du ønsker rettet?
                 <br/>Leder du efter en freelance webdesigner der laver webløsninger for både store og små virksomheder, samt privatpersoner?</p>
                 <p>Jeg arbejder freelance og derfor leverer jeg altid konkurrencedygtige priser, direkte og hurtig kommunikation mellem dig som kunde og mig</p>
                 <p>Netop det at jeg er freelance betyder at du som kunde ikke skal igennem en eller anden langvarrig samtale med en medarbejder i kundeservice, fordi kundeservice-personale <u>ikke</u> eksisterer hos freelancere.</p>
                 <p>Det kan godt være at jeg som freelancer ikke arbejder hos et firma, men det har ingen betydning for kavliteten af mine produkter.<br />Jeg leverer samme professionelle kvalitet og service som man kan forvente af en virksomhed.<br/>Dertil arbejder jeg til en meget fordelagtig pris og betaling for mit arbejde fastlægges individuelt pr. kunde.</p>
                 <p>Lyder det jeg har fortalt som noget for <b>DIG</b>, så tøv ikke med at kontakte mig!</p>
             </div>
             <img src="images/wrapper_bottom.png" />
             </div>
             <div style="clear:both;"></div>
             <div id="footer"><?php include 'inc/footer.php'; ?></div>
         </div>
     </body>
 </html>

EDIT: Jeg kan godt oprette et gratis subdomain hos en eller anden gratis tjeneste, hvis det virkelig er nødvendigt at kunne se det i en browser.

Indlæg senest redigeret d. 14.05.2012 19:59 af Bruger #17072

Bruger #16669 @ 15.05.12 01:38

Har ændret din html og css så du ikke behøver at bruge billeder, men bare bruger en border-radius.

Meget nemmere og kan udvides i både længde og bredde :-)

HTML kode

 <div id="container">
              <div id="logo"><img src="images/logo.png" /></div>
              <div class="nav"><?php include 'inc/menu.php'; ?></div>
              <div id="wrapper">
              <div id="ref"><a href="referencer.php"><img src="images/web/web.png" /></a><br /><br/></div>
              <div id="content">
                  <h1>Velkommen</h1>
                  <h2>Webløsninger</h2>
                  <p>Har du en idé til en hjemmeside, er der fejl på din side som du ønsker rettet?
                  <br/>Leder du efter en freelance webdesigner der laver webløsninger for både store og små virksomheder, samt privatpersoner?</p>
                  <p>Jeg arbejder freelance og derfor leverer jeg altid konkurrencedygtige priser, direkte og hurtig kommunikation mellem dig som kunde og mig</p>
                  <p>Netop det at jeg er freelance betyder at du som kunde ikke skal igennem en eller anden langvarrig samtale med en medarbejder i kundeservice, fordi kundeservice-personale <u>ikke</u> eksisterer hos freelancere.</p>
                  <p>Det kan godt være at jeg som freelancer ikke arbejder hos et firma, men det har ingen betydning for kavliteten af mine produkter.<br />Jeg leverer samme professionelle kvalitet og service som man kan forvente af en virksomhed.<br/>Dertil arbejder jeg til en meget fordelagtig pris og betaling for mit arbejde fastlægges individuelt pr. kunde.</p>
                  <p>Lyder det jeg har fortalt som noget for <b>DIG</b>, så tøv ikke med at kontakte mig!</p>
              </div>
              </div>
              <div style="clear:both;"></div>
              <div id="footer"><?php include 'inc/footer.php'; ?></div>
          </div>

CSS kode

 #container {
      margin: auto;
      width: 1100px;
      background-image: url(../images/container.png);
      background-repeat: repeat-y;
  }
  #wrapper {
      width: 1000px;
      margin: auto;
      
  }
  #content {
      padding-top: 20px;
      padding-left: 10px;
      padding-right: 5px;
      width: 675px;
      background-color: #FFF;
      padding-bottom:20px;
      border-radius:5px;
      
  }
  #ref {
      width: 30%;
      float: right;
      text-align: right;
      padding-right: 5px;
      padding-top: 35px;
  }
  #logo {
      background-color: #FFF;
  }
  #logo img {
      width: 1000px;
      height: 100px;
      text-align: center;
  }

Bruger #10216 @ 15.05.12 08:45

4.283

@Patrick border-radius tilhører CSS3

...og Tommy fandt vist også dit nye logo+firmanavn: KHIT... En god relation mellem navn, og dit "IT" område.

Samtidig en lille god twister på navnet i forhold til gode gamle Knight Rider.

Indlæg senest redigeret d. 15.05.2012 08:48 af Bruger #10216

Bruger #17072 @ 15.05.12 08:51

152

Jeg takker for jeres input.
@Tommy Koden virker fint i dit eksempel. Jeg vil forsøge at gennemføre det på mit site og vender tilbage når jeg har udført tests.

Bruger #16977 @ 15.05.12 08:55

Du bliver nok nød til at lave round-top-bottom.png filen selv, så den passer med den bredde du selv ønsker, jeg har nemlig ændret lidt på padding værdierne i eksemplet - bemærk også at billedet er lavet som en sprite, så du skal også selv lige tilpasse background-position på #content:after

Bruger #17072 @ 20.05.12 16:00

152

@Tommy
Det virker helt fint. Jeg takker for hjælpen

Hvid boks omkring indhold

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler