Jump to content

Rodis

Members
 View Profile  See their activity

  • Posts

    50

  • Joined

  • Last visited

    Never

Contact Methods

  • Website URL
    http://www.startbasis.nl

Profile Information

  • Gender
    Not Telling

Rodis's Achievements

Newbie

Newbie (1/5)

0

Reputation

  1. Rodis
    Damn you're the bomb this works and this is my code now. <!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> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function copyit(theField) { var tempval=eval("document."+theField) tempval.focus() tempval.select() therange=tempval.createTextRange() therange.execCommand("Copy") } // End --> </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AH voetbal plaatjes lijst.</title> <style type="text/css"> <!-- body { font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #4E5869; margin: 0; padding: 0; color: #000; } /* ~~ Element/tag selectors ~~ */ ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */ padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */ padding-right: 15px; padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */ } a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */ border: none; } /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */ a:link { color:#414958; text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */ } a:visited { color: #4E5869; text-decoration: underline; } a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ text-decoration: none; } /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */ .container { width: 100%; max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */ min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */ background: #FFF; margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */ } /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */ .header { background: #6F7D94; height:90px; color:#FFF; } .sidebar1 { float: right; width: 20%; background: #93A5C4; padding-bottom: 10px; } .content { padding: 10px 0; width: 80%; float: right; } /* ~~ This grouped selector gives the lists in the .content area space ~~ */ .content ul, .content ol { padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */ } /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */ ul.nav { list-style: none; /* this removes the list marker */ border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */ margin-bottom: 15px; /* this creates the space between the navigation on the content below */ } ul.nav li { border-bottom: 1px solid #666; /* this creates the button separation */ } ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */ padding: 5px 5px 5px 15px; display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */ text-decoration: none; background: #8090AB; color: #000; } ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */ background: #6F7D94; color: #FFF; } /* ~~ The footer ~~ */ .footer { padding: 10px 0; background: #6F7D94; position: relative;/* this gives IE6 hasLayout to properly clear */ clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ } /* ~~ miscellaneous float/clear classes ~~ */ .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. The floated element must precede the element it should be next to on the page. */ float: left; margin-right: 8px; } .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */ clear:both; height:0; font-size: 1px; line-height: 0px; } .container .footer p { color: #FFF; text-align: center; font-size:10px; } --> </style><!--[if lte IE 7]> <style> .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */ ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */ </style> <![endif]--></head> <body name="top"> <div class="container"> <div class="header"> <img src="./images/voetbalkaartje.png" alt="" name="Insert_logo" width="86" height="100" id="Insert_logo" style="background: #8090AB; display:block; float:left; margin-left:20px;" /> <h1>Mijn lijstje van AH voetbal plaatjes!</h1> <!-- end .header --></div> <div class="sidebar1"> <ul class="nav"> <li><a href="makelist.php">Nieuw lijstje maken.</a></li> <li><a href="index.php">Naar de gebruiksaanwijzing.</a></li> <li><a href="http://tinyurl.com/" target="_blank">Naar TinyURL gaan.</a></li> </ul> <p> Mijn Ah lijstje is een service van <a href="http://www.startbasis.nl">Starbasis.nl</a></p> <!-- end .sidebar1 --></div> <div class="content"> <p align="center"> Meer info beneden aan de pagina. <a href="#beneden"> Naar beneden.</a> </p> <p> <script language=JavaScript> function set(n) { temp = document.form1.elements.length ; for (i=0; i < temp; i++) { document.form1.elements[i].checked=n; } } function checkall() { void(d=document); void(el=d.getElementsByName('check')); for(i=0;i<el.length;i++) void(el[i].checked=1) } //invert function invers(){ temp = document.form1.elements.length ; for (i=0; i < temp; i++){ if(document.form1.elements[i].checked == 1){document.form1.elements[i].checked = 0;} else {document.form1.elements[i].checked = 1} } } </script> </p> <?php if (!empty($_GET['naam'])){ $naam = "value=\"".$_GET['naam']."\""; } else { $naam = ""; } // selected by collect=0,1,2,3 Using $_GET ?> <form id="form1" name="form1" method="get" action="./readlist.php"> <label>Naam eigenaar lijstje:<input name="naam" type="text" <?php echo $naam ;?>/></label> <label>Lijst van selectie plaatjes:<select name="collect"> <option value="0">selecteer optie!</option> <option value="1">in decollectie</option> <option value="2">nog niet in collectie</option> <option value="3">dubbele collectie</option> </select></label> <p> <?php //new code if (!empty($_GET['checked'])){ for($i=0; $i<326; $i++) { $checked = in_array($i, $_GET['checked']) ? 'checked' : ''; echo " <input $checked type=\"checkbox\" name=\"checked[]\" id=\"check\" value=\"". $i ."\"/> <label for=\"". $i ."\">". $i ."</label> <br /> "; } }//end new code echo "tussen 2 codes in"; if (empty($_GET['checked'])){ $i = 0; do { $i = $i+1; echo " <input type=\"checkbox\" name=\"checked[]\" id=\"check\" value=\"". $i ."\"/> <label for=\"". $i ."\">". $i ."</label> <br /> "; if($i > 324){break;} }// end do while($i < 325); } ?> </p><input name="check" type="submit" value="Print lijst" /> <input type=button onClick="checkall()" value="selecteer alles" name="button"> <input name=button onclick="invers()" type=button value=" Keer selectie om "> <INPUT name=button onclick=set(0) type=button value=" Reset "> </form> <p><a name="beneden">De geselecteerde nummers komen overzichtelijk in een lijstje. Zo heb je heel overzichtelijk een lijst met de nummers die je al hebt of juist nog niet hebt. Die kan je dan doorsturen selecteren en kopieren met je rechtermuis knop en naar je kennissen of vrienden sturen.</a> ook kan je de url (webadres) kopieren en doorgeven.</p> <p><a href="#top">Naar boven.</a></p> </p> <!-- end .content --></div> <div class="footer"> <p>Copyright by <a href="http://www.startbasis.nl">Startbasis.nl</a></p> <!-- end .footer --></div> <!-- end .container --></div> </body> </html> Thanks a million. Now all i have to do is solve this in the option 2 but that shouldn't be to hard
  2. Rodis
    You get what i mean. going to try that out in a minute and wil let you now if that works.
  3. Rodis
    Hello, Hope someone can help me cause i been at it all day and google woul'dn't help me. I been writing a little script which generates a list of numbers you can check and make a list of the numbers that have been checked. Now when i use $_get to the next page everything works but now i need to take the url and use $_get back to the generated check box list and it needs to know by the url which box had been checked and checked that one so the list can be altered. here is my code sofar <!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=utf-8" /> <title>AH plaatjes.</title> </head> <body name="top"> Meer info beneden aan de pagina. <a href="#beneden">Naar beneden.</a> <p> <script language=JavaScript> function set(n) { temp = document.form1.elements.length ; for (i=0; i < temp; i++) { document.form1.elements[i].checked=n; } } function checkall() { void(d=document); void(el=d.getElementsByName('check')); for(i=0;i<el.length;i++) void(el[i].checked=1) } //invert function invers(){ temp = document.form1.elements.length ; for (i=0; i < temp; i++){ if(document.form1.elements[i].checked == 1){document.form1.elements[i].checked = 0;} else {document.form1.elements[i].checked = 1} } } </script> </p> <form id="form1" name="form1" method="get" action="./readlist.php"> <label>Naam eigenaar lijstje:<input name="naam" type="text" /></label> <label>Lijst van selectie plaatjes<select name="collect"> <option value="0">selecteer optie!</option> <option value="1">in decollectie</option> <option value="2">nog niet in collectie</option> <option value="3">dubbele collectie</option> </select></label> <p> <?php //TO Do trying to get the checkboxes checked with get and array ///////////////// do { $i = $i+1; echo " <input type=\"checkbox\" name=\"checked[]\" id=\"check\" value=\"". $i ."\"/> <label for=\"". $i ."\">". $i ."</label> <br /> "; if($i > 324){break;} }// end do while($i < 325); ?> </p><input name="check" type="submit" value="Print lijst" /> <input type=button onClick="checkall()" value="selecteer alles" name="button"> <input name=button onclick="invers()" type=button value=" Keer selectie om "> <INPUT name=button onclick=set(0) type=button value=" Reset "> </form> <p><a name="beneden">De geselecteerde nummers komen overzichtelijk in een lijstje. Zo heb je heel overzichtelijk een lijst met de nummers die je al hebt of juist nog niet hebt. Die kan je dan doorsturen selecteren en kopieren met je rechtermuis knop en naar je kennissen of vrienden sturen.</a> ook kan je de url (webadres) kopieren en doorgeven.</p> <p><a href="#top">Naar boven.</a></p> </body> </html> Now what i need is when you fill out an url like http://localhost/ah/index.php?checked%5B%5D=2&checked%5B%5D=3 it needs to check the same boxes. please help me out thanks in advance
  4. Rodis
    What raknjak means with, you gave the answer in your question, is "both prep and cook" so have a look at those values in your code and you will see what is wrong.
  5. Rodis
    Now all i need is to find how to mark this topic solved
  6. Rodis
    Got it solved :-D As stated in my last post my only problem left was that the right column was placed and floated to the right but started below the main content div. by placing the right div before the maincontent it showed up properly so this is my code @charset "utf-8"; /* CSS Document */ body,html { margin: 0px; padding: 0px; text-align:center; } .leftflt { float:left; } .rightflt { float:right; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } #outer-wrapper { padding:0px; margin:0px auto; background-image:url(../images/side_box_bg_r.gif); background-repeat:repeat-y; background-position:right; width:100%; } #wrapper { padding:0px; margin:0px auto; background-image:url(../images/left_side_bar.png); background-repeat:repeat-y; text-align:left; display:inline-block; width:100%; } #header { background-image:url(../images/header_bg.gif); height:172px; width:100%; } #logo { float:left; background-image:url(../images/logo_sb.gif); background-repeat:no-repeat; height:150px; width:300px; } #banner_top { float:right; height:60px; width:468px; background-color:#CCC; } #navbar { background-image:url(../images/navbar_bg.gif); height:20px; width:100%; } /* 3 columns wrapper */ #column-wrapper { margin:0px; padding:0px; overflow:hidden; } #left-column { float:left; width:200px; z-index:1; } .left_menu { border-bottom-style:dotted; border-bottom-width:1px; } #content-column { margin:0px 151px 0px 200px; padding:10px; z-index:3; } #text { border:solid 1px; } #right-column { float:right; width:151px; z-index:2; } #lipsum2 { } #footer { clear:both; background-image:url(../images/footer.gif); height:60px; width:100%; } #validators { } and my 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> <title>Template test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="outer-wrapper"> <div id="wrapper"> <div id="header"> <div id="logo">Logo</div> <div id="banner_top">Banner</div><!--banner top --> </div><!--header --> <div class="clearfloat"></div> <div id="navbar">Navbar!.. </div><!--navbar --> <div id="column-wrapper" class="column"> <div id="left-column" class="column"> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu and more of the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> </div><!--left_column --> <div id="right-column" class="column"> <div class="lipsum2"> <p>Right column </p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Curabitur a leo eget tortor consectetur consectetur.</li> <li>Donec nec est quis ante luctus feugiat.</li> <li>Ut ut turpis lorem, non sodales quam.</li> <li>Cras sit amet orci id mauris cursus adipiscing.</li> </ul> <p> </p> <ul> <li>Proin pretium elit ut dolor ornare a fringilla enim varius.</li> <li>Cras sit amet erat ut tellus congue consequat.</li> <li>Aliquam ac odio nec justo faucibus consequat.</li> <li>Suspendisse in nisi neque, eget aliquet tortor.</li> <li>Fusce sit amet erat ut purus ullamcorper suscipit.</li> </ul> </div> </div><!--right-column --> <div id="content-column" class="column"> <div id="text"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "Er is niemand die van pijn zelf houdt, die het zoekt en die het hebben wil, eenvoudigweg omdat het pijn is..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut purus nec sapien vulputate aliquam eget ut nisl. Donec malesuada elementum arcu, sed congue odio tempus vel. Nam congue molestie elit non pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est arcu, fermentum et malesuada nec, tincidunt sit amet velit. Morbi id massa et nibh accumsan elementum. Aliquam eu sapien vitae sem suscipit feugiat. Donec in sem et lacus tincidunt aliquet. Proin nec vehicula quam. Morbi mattis scelerisque luctus. Etiam rutrum lorem eu lacus sagittis ornare. Suspendisse suscipit turpis eget dolor dapibus mattis. Vestibulum nisi erat, pretium non imperdiet sit amet, ornare sed eros. Suspendisse imperdiet dapibus mattis. Proin imperdiet ligula condimentum magna egestas consequat. Curabitur posuere aliquam arcu eget vehicula. Vivamus mi dolor, varius condimentum luctus at, dignissim malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in lorem ipsum. Maecenas hendrerit commodo molestie. Ut rhoncus urna a dui vestibulum quis sodales lorem volutpat. Suspendisse felis sem, sagittis in lobortis et, semper eget nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit odio at sapien pretium non posuere arcu venenatis. Suspendisse iaculis interdum turpis sit amet malesuada. Etiam eget eros sit amet quam ornare mattis a quis tellus. </div><!--text --> </div><!--content-column --> <div class="clearfloat"></div> </div><!--column-wrapper --> <div id="footer"> <div id="validators"> <a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valide CSS!" /> </a> </div><!--validators --> </div><!--footer --> </div><!--wrapper --> </div><!--outer-wrapper --> </body><!--close body --> </html><!--close html --> http://projecten.startbasis.nl/templatetest/index1.html Thanks for the help anyways hope someone can use my solution
  7. Rodis
    Ok so i changed a few things i have a way to stretch it to the same hight http://projecten.startbasis.nl/templatetest/index1.html but when placing the right column div to its position i am back to the begining. as seen in http://projecten.startbasis.nl/templatetest/index2.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> <title>Template test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo">Logo</div> <div id="banner_top">Banner</div><!--banner top --> </div><!--header --> <div id="navbar">Navbar</div> <div id="column_wrapper" class="column"> <div id="left_column" class="column"> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu and more of the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> </div><!--left_column --> <div id="content_column" class="column"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "Er is niemand die van pijn zelf houdt, die het zoekt en die het hebben wil, eenvoudigweg omdat het pijn is..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut purus nec sapien vulputate aliquam eget ut nisl. Donec malesuada elementum arcu, sed congue odio tempus vel. Nam congue molestie elit non pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est arcu, fermentum et malesuada nec, tincidunt sit amet velit. Morbi id massa et nibh accumsan elementum. Aliquam eu sapien vitae sem suscipit feugiat. Donec in sem et lacus tincidunt aliquet. Proin nec vehicula quam. Morbi mattis scelerisque luctus. Etiam rutrum lorem eu lacus sagittis ornare. Suspendisse suscipit turpis eget dolor dapibus mattis. Vestibulum nisi erat, pretium non imperdiet sit amet, ornare sed eros. Suspendisse imperdiet dapibus mattis. Proin imperdiet ligula condimentum magna egestas consequat. Curabitur posuere aliquam arcu eget vehicula. Vivamus mi dolor, varius condimentum luctus at, dignissim malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in lorem ipsum. Maecenas hendrerit commodo molestie. Ut rhoncus urna a dui vestibulum quis sodales lorem volutpat. Suspendisse felis sem, sagittis in lobortis et, semper eget nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit odio at sapien pretium non posuere arcu venenatis. Suspendisse iaculis interdum turpis sit amet malesuada. Etiam eget eros sit amet quam ornare mattis a quis tellus. </div><!--content_column --> <div id="right_column" class="column"> <div class="lipsum2"> <p> </p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Curabitur a leo eget tortor consectetur consectetur.</li> <li>Donec nec est quis ante luctus feugiat.</li> <li>Ut ut turpis lorem, non sodales quam.</li> <li>Cras sit amet orci id mauris cursus adipiscing.</li> </ul> <p> </p> <ul> <li>Proin pretium elit ut dolor ornare a fringilla enim varius.</li> <li>Cras sit amet erat ut tellus congue consequat.</li> <li>Aliquam ac odio nec justo faucibus consequat.</li> <li>Suspendisse in nisi neque, eget aliquet tortor.</li> <li>Fusce sit amet erat ut purus ullamcorper suscipit.</li> </ul> </div> </div><!--right_column --> </div><!--column wrapper --> <div id="footer"> <div id="validators"> <a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valide CSS!" /> </a> </div><!--validators --> </div><!--footer --> </div><!--wrapper --> </body><!--close body --> </html><!--close html --> @charset "utf-8"; /* CSS Document */ body,html { margin: 0px; padding: 0px; text-align:center; } #wrapper { text-align:left; } #header { background-image:url(../images/header_bg.gif); height:172px; width:100%; } #logo { float:left; background-image:url(../images/logo_sb.gif); background-repeat:no-repeat; height:150px; width:300px; } #banner_top { float:right; height:60px; width:468px; background-color:#CCC; } #navbar { clear:both; background-image:url(../images/navbar_bg.gif); height:20px; width:100%; } /* 3 columns wrapper */ #column_wrapper { overflow:hidden; position: relative; } /* This will make sure the columns get stretched */ #column_wrapper .column { padding-bottom: 1001em; margin-bottom: -1000em; } #left_column { float:left; background-image:url(../images/left_side_bar.png); background-repeat:repeat-y; width:200px; } .left_menu { border-bottom-style:dotted; border-bottom-width:1px; } #content_column { margin-left:200px; margin-right:151px; padding:10px; } #right_column { float:right; background-image:url(../images/side_box_bg_r.gif); background-repeat:repeat-y; width:151px; } #footer { clear:both; background-image:url(../images/footer.gif); height:60px; width:100%; } #validators { } so in the second example i have added position:absolute; top:0px; right:0px; To the right column so it gets to his position it needs to go but then still text disapears and everything is only stretched to th eleft and middle container :-( how to resolve this?
  8. Rodis
    OK thanks im going to get this layout and start mine from ground up again hope i wil get what i want. it all looked simple when i started lol, why doesnt ie just implement all css like ff just keep one standard grrrr I still think tables are much easier hehehhe
  9. Rodis
    Yes i had already tried that one out too. i have been trying a lot of things lol had some trouble to have them displayed the same in cross browser, then i thought i had it until the content in the columns changed. then i saw that everything adjusts to the left column but not to any other column. the text in the right now dissapears behind the page i had a style that didn't let it dissapear but still this same problem appeared. it's weired i have been googling and spying in other layouts i have no idea what i am doing wrong sniffff. :-( i really want this to work as i am busy on some new code for my page and i want the layout to be vallid xhtml and css. But thanks for trying anyways :-)
  10. Rodis
    Hello, I am getting crazy trying to get my div layout to stretch propperly. I have tried many solutions to have 3 floated columns stretch to an equal height. right now i have the faux column but here's the deal. When i fill up my left column with a lot of text everything works properly and all 3 columns stretch out to an equal height. example url: http://projecten.startbasis.nl/templatetest/index2.html But here comes my problem when fill out the right column with more text then the left it dissapears and none of the tables stretch to an equal hight. http://projecten.startbasis.nl/templatetest/ i cannot seem to find the problem maybe one of you can have a fresh and more experienced look as i have not managed to put my site in div layout yet :-( Hope someone can help me out here's my code. CSS: @charset "utf-8"; /* CSS Document */ body,html { margin: 0px; padding: 0px; text-align:center; } #wrapper { margin:0px auto; padding:0px; width:100%; text-align:left; } #header { width: 100%; height:172px; background-color: #0F0; background-image:url(../images/header_bg.gif); background-repeat:repeat-x; } #logo { float:left; border:solid; width:20px; height:20px; } #banner_top { width:468px; height:68px; background-color:#FFF; float:right; margin:40px; } #navbar { height:20px; background-color:#CCC; background-image:url(../images/navbar_bg.gif); background-repeat:repeat-x; font-style:oblique; font-weight:bold; margin:0; } /* 3 columns wrapper */ #column_wrapper { margin:0px auto; padding:0px; width:100%; overflow:hidden; position:relative; } #left_column { float: left; width: 200px; height:100%; min-height:100%; margin:0px auto; padding:0px; padding-bottom:60px; background-color: #FFF; background-image:url(../images/left_side_bar.png); background-repeat:repeat-y; } .left_menu { width:190px; height:100%; margin:0px auto; padding:5px; border-width:1px; border-bottom-style:dotted; border-bottom-color:#333; overflow:visible; } #content_column { float:left; height:100%; min-height:100%; margin-left:200px; margin-right:150px; overflow:hidden; padding:20px; background-color:#FFF; position:absolute; left:0; top:0; right:0; } #right_column { float: right; width: 150px; height:100%; min-height:100%; margin:0px auto; padding:0px; background-color: #0FF; background-image:url(../images/side_box_bg_r.gif); background-repeat:repeat-y; position:absolute; top:0; right:0; } #footer { clear:both; margin:0px auto; padding-left:20px; background-color: #0F0; width:100%; height:60px; background-image:url(../images/footer.gif); background-repeat:repeat-x; position:absolute; } #validators { float:left; width:auto; height:auto; } 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> <title>Template test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="css/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo">Logo</div> <div id="banner_top">Banner</div><!--banner top --> </div><!--header --> <div id="navbar">Navbar</div> <div id="column_wrapper"> <div id="left_column"> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu and more of the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> <div class="left_menu">This is the menu</div><!--left menu --> </div><!--left_column --> <div id="content_column"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "Er is niemand die van pijn zelf houdt, die het zoekt en die het hebben wil, eenvoudigweg omdat het pijn is..." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut purus nec sapien vulputate aliquam eget ut nisl. Donec malesuada elementum arcu, sed congue odio tempus vel. Nam congue molestie elit non pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est arcu, fermentum et malesuada nec, tincidunt sit amet velit. Morbi id massa et nibh accumsan elementum. Aliquam eu sapien vitae sem suscipit feugiat. Donec in sem et lacus tincidunt aliquet. Proin nec vehicula quam. Morbi mattis scelerisque luctus. Etiam rutrum lorem eu lacus sagittis ornare. Suspendisse suscipit turpis eget dolor dapibus mattis. Vestibulum nisi erat, pretium non imperdiet sit amet, ornare sed eros. Suspendisse imperdiet dapibus mattis. Proin imperdiet ligula condimentum magna egestas consequat. Curabitur posuere aliquam arcu eget vehicula. Vivamus mi dolor, varius condimentum luctus at, dignissim malesuada lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in lorem ipsum. Maecenas hendrerit commodo molestie. Ut rhoncus urna a dui vestibulum quis sodales lorem volutpat. Suspendisse felis sem, sagittis in lobortis et, semper eget nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi hendrerit odio at sapien pretium non posuere arcu venenatis. Suspendisse iaculis interdum turpis sit amet malesuada. Etiam eget eros sit amet quam ornare mattis a quis tellus. </div><!--content_column --> <div id="right_column"> <div class="lipsum2"> <p> </p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Curabitur a leo eget tortor consectetur consectetur.</li> <li>Donec nec est quis ante luctus feugiat.</li> <li>Ut ut turpis lorem, non sodales quam.</li> <li>Cras sit amet orci id mauris cursus adipiscing.</li> </ul> <p> </p> <ul> <li>Proin pretium elit ut dolor ornare a fringilla enim varius.</li> <li>Cras sit amet erat ut tellus congue consequat.</li> <li>Aliquam ac odio nec justo faucibus consequat.</li> <li>Suspendisse in nisi neque, eget aliquet tortor.</li> <li>Fusce sit amet erat ut purus ullamcorper suscipit.</li> </ul> </div> </div><!--right_column --> </div><!--column wrapper --> <div id="footer"> <div id="validators"> <a href="http://validator.w3.org/check?uri=referer"> <img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valide CSS!" /> </a> </div><!--validators --> </div><!--footer --> </div><!--wrapper --> </body><!--close body --> </html><!--close html --> Hope someone can help me out thank you advance
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.