|
|
 | Hjælp til HTML og runde hjørne
Fra :  sorenbruun | Vist : 1536 gange
20 point
Dato : 25-03-09 14:02 |
|
Hej,
Jeg har lidt problemer med en side jeg er ved at lave. Jeg har lavet nogle runde hjørner på http://www.roundedcornr.com/. Det har jeg gjort før med succes - så vidt så godt.
Nu har jeg så prøvet igen, og vil gerne have en tabel inde i den kasse som rammen med de runde hjørner danner.
Når det vises i dreamweaver er der ingen problemer, men når jeg prøver at vise det i en browser (IE 7, IE8, Firefox 3 & Chrome) så er rammen med de runde hjørner "klappet" sammen, og omkranser ikke tabellen.
Se venligst disse screemdumps:
Sådan ser det ud i Dreamweaver: http://prisportal.com/images/Dreamweaver_PrintScreen.jpg og
sådan ser det ud i IE8: http://prisportal.com/images/InternetExplorer8_PrintScreen.jpg
Her er html koden:
Kode
<body class="twoColFixRtHdr">
<div id="container">
<div id="header">
<table width="760" border="0">
<tr>
<td width="750" height="100"><div align="center"></div></td>
</tr>
<tr>
<td height="75"><div align="center"><img src="http://xxx.dk/images/Logo_400x75_font_60_Ubuntu.gif" alt="logo" width="400" height="75" align="middle" longdesc="http://xxx.dk" /></div></td>
</tr>
</table>
<!-- end #header --></div>
<div id="sidebar1">
<h3></h3>
<p></p>
<!-- end #sidebar1 --></div>
<div id="mainContent">
<div class="roundedcornr_box_527384">
<div class="roundedcornr_top_527384"><div></div>
<table width="530" height="449" border="0">
<tr>
<td height="35" colspan="6"><div align="center">Køreskoler i [KommuneNavn - CountyName]</div></td>
</tr>
<tr>
<td width="20" height="35"> </td>
<td width="25"><div align="center">1</div></td>
<td width="300"><div align="left">[DrivingSchoolName1]</div></td>
<td width="70"><div align="center">[Price1]</div></td>
<td width="70"><div align="center">[Show1]</div></td>
<td width="20"> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">2</div></td>
<td><p align="left">[DrivingSchoolName2]</p></td>
<td><div align="center">[Price2]</div></td>
<td><div align="center">[Show2]</div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">3</div></td>
<td><div align="left">[DrivingSchoolName3]</div></td>
<td><div align="center">[Price3]</div></td>
<td><div align="center">[Show3]</div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">4</div></td>
<td><div align="left">[DrivingSchoolName4]</div></td>
<td><div align="center">[Price4]</div></td>
<td><div align="center">[Show4]</div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">5</div></td>
<td><div align="left"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">6</div></td>
<td><div align="left"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">7</div></td>
<td><div align="left"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">8</div></td>
<td><div align="left"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">9</div></td>
<td><div align="left"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td><div align="center">10</div></td>
<td><div align="left"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td> </td>
</tr>
<tr>
<td height="35"> </td>
<td colspan="2"><div align="left" class="style2">[Show Previous 10]</div></td>
<td colspan="2"><div align="right">[Show next 10]</div></td>
<td> </td>
</tr>
</table>
</div>
<div class="roundedcornr_content_527384">
<p></p>
</div>
<div class="roundedcornr_bottom_527384"><div></div></div>
</div>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html> |
Og her er CSS koden:
Kode
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
background: #FFFFFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColFixRtHdr #container {
width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.twoColFixRtHdr #header {
background: #FFFFFF;
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.twoColFixRtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.twoColFixRtHdr #sidebar1 {
float: right; /* since this element is floated, a width must be given */
width: 200px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px;
}
.twoColFixRtHdr #mainContent {
margin: 0 220px 0 0; /* the right margin on this div element creates the column down the right side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 5px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.twoColFixRtHdr #footer {
padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#FFFFFF;
}
.twoColFixRtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 16px;
line-height: 0px;
}
.roundedcornr_box_527384 {
background: url(roundedcornr_527384_tl.png) no-repeat top left;
}
.roundedcornr_top_527384 {
background: url(roundedcornr_527384_tr.png) no-repeat top right;
}
.roundedcornr_bottom_527384 {
background: url(roundedcornr_527384_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_527384 div {
background: url(roundedcornr_527384_br.png) no-repeat bottom right;
}
.roundedcornr_content_527384 {
background: url(roundedcornr_527384_r.png) top right repeat-y;
}
.roundedcornr_top_527384 div,.roundedcornr_top_527384,
.roundedcornr_bottom_527384 div, .roundedcornr_bottom_527384 {
width: 100%;
height: 15px;
font-size: 16px;
}
.roundedcornr_content_527384, .roundedcornr_bottom_527384 {
margin-top: -19px;
}
.roundedcornr_content_527384 { padding: 0 15px; } |
Er der nogen der kan forklarer hvad der går galt, og har et løsningsforslag ? Som det sikkert tydeligt fremgår er jeg ingen ekspert, så svaret må gerne være lidt let læseligt 
Med venlig hilsen
Søren
| |
|
Hej Ilhja,
Ja det er muligt, men hvis jeg kigger på den kode jeg fik fra http://www.roundedcornr.com/, så så den sådan her ud:
Kode
<div class="roundedcornr_box_527384">
<div class="roundedcornr_top_527384"><div></div></div>
<div class="roundedcornr_content_527384">
<p>[B]Lorem ipsum dolor sit amet, consectetur
qui officia deserunt mollit anim id est laborum.[/B]</p>
</div>
<div class="roundedcornr_bottom_527384"><div></div></div>
</div> |
hvor jeg har sat tabellen ind hvor "lorem ipsum...." står. Så umiddelbart så mener jeg at det er sådan at den skal se ud ?!? Men ret mig hvis jeg tager fejl...
Har prøvet at lege lidt med de 2 div tags uden held, men hvis nogen kan sige hvor nøjagtigt de skal stå istedet, så ville jeg være meget tilfreds.
Mvh Søren
| |
| Godkendelse af svar
Fra : sorenbruun |
Dato : 25-03-09 14:53 |
|
Hej igen ilhja,
Jeg tager det i mig igen - det var lige præcist problemet... Min server var bare lidt lang tid om at opdaterer...
Tak for svaret Ilhja.
Mvh Søren
| |
 | Kommentar
Fra : Ilhja |
Dato : 25-03-09 14:55 |
| | |
 | Du har følgende muligheder | |
|
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.
Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
| |
|
|