Gå til innhold

Kun normal scroll ved bruk av divs

Andreasfe

Anbefalte innlegg

Andreasfe

Andreasfe

Skrevet
Skrevet

skal lage en portallignende forside i html...

 

3 kolonner...

 

venstre: meny og diverse annet tull..

 

midten: nyheter og sånt

 

høyre: noe annet tull...

 

tenkte enkelt og greit å lage 3 div'er... og sette inn sider i disse -> venstre.html... nyheter.html... hoyre.html

 

men så er det sånn at det ganske sikkert nyhet.html som blir lengst...

 

 

Mitt ønske at det da ikke skal bli scrollbar på div'n i midten, men ytterst til høyre på hele siden (der den normalt skal være)...

 

slik at høyden på scrollingen avhenger av den lengste div'n...

 

ble litt rotete...

men skjønner noen hva jeg mener?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Roberto

Roberto

Skrevet
Skrevet (endret)
Jeg må bare takke og bukke for hurtig hjelp!

 

:w00t:

:) Vær så god!

 

Vil minne på at glish koden kan være litt vanskelig å forstå med det første, så bare spør om du står fast! Husk at du behøver ikke å tenke på formatering av tekst og bilder med det første, fokusér først på div blokkene før du omsider begynner å tenke på hva glish.com gjør med tekst osv...

Endret av PiRANhA
Lenke til kommentar
Andreasfe

Andreasfe

Skrevet
  • Forfatter
Skrevet (endret)

Ok... Nå har jeg tatt utgangspunkt i denne:

 

http://glish.com/css/7.asp

 

 

det jeg lurer på nå er hvordan jeg kan sette inn en iframe i en av div'ene uten å få scrollbar på frame'n...

 

vil ha det sånn at den iframe'n øker etter hvor mye innhold som er på siden som er satt i frame'n...

 

vil liksom ikke ha det sånn at jeg setter en spesiell størrelsesverdi...

 

 

jeg prøvde på noe men fikk det ikke helt til...

 

her har dere koden...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : 3 columns, the holy grail</title>

<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */

body {
 background-color: #006666;
               margin:10px 10px 0px 10px;
 padding:0px;
 }

#leftcontent {
 position: absolute;
 left:10px;
 top:50px;
 width:200px;
 background:#009999;
 border:1px solid #000;
 }

#centercontent {
 background:#006666;
   	margin-left: 199px;
   	margin-right:199px;
 border:1px solid #000;
 /*
 IE5x PC mis-implements the box model. Because of that we sometimes have
 to perform a little CSS trickery to get pixel-perfect display across browsers.
 The following bit of code was proposed by Tantek Celik, and it preys upon a CSS
 parsing bug in IE5x PC that will prematurly close a style rule when it runs
 into the string "\"}\"". After that string appears in a rule, then, we can override
 previously set attribute values and only browsers without the parse bug will
 recognize the new values. So any of the name-value pairs above this comment
 that we need to override for browsers with correct box-model implementations
 will be listed below.
 
 We use the voice-family property because it is likely to be used very infrequently,
 and where it is used it will be set on the body tag. So the second voice-family value 
 of "inherit" will override our bogus "\"}\"" value and allow the proper value to
 cascade down from the body tag.

 The style rule immediately following this rule offers another chance for CSS2
 aware browsers to pick up the values meant for correct box-model implementations.
 It uses a CSS2 selector that will be ignored by IE5x PC.
 
 Read more at http://www.glish.com/css/hacks.asp
 */
 
 voice-family: "\"}\"";
 voice-family: inherit;
   	margin-left: 201px;
   	margin-right:201px;
 }
html>body #centercontent {
   	margin-left: 201px;
   	margin-right:201px;
 }

#rightcontent {
 position: absolute;
 right:10px;
 top:50px;
 width:200px;
 background:#009999;
 border:1px solid #000;
 }

#banner {
 background:#996600;
 height:40px;
 border-top:1px solid #000;
 border-right:1px solid #000;
 border-left:1px solid #000;
 voice-family: "\"}\"";
 voice-family: inherit;
 height:39px;
 }
html>body #banner {
 height:39px;
 }
 
p,h1,pre {
 margin:0px 10px 10px 10px;
 }
 
h1 {
 font-size:14px;
 padding-top:10px;
 }
 
#banner h1 {
 font-size:14px;
 padding:10px 10px 0px 10px;
 margin:0px;
 }

#rightcontent p {
 font-size:10px
 }

</style>
</head><body>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, the holy grail</h1></div>

<div id="leftcontent">
<iframe width="200px" height="*" src="left.html" scrolling="no" marginheight="5px" marginwidth="5px" FRAMEBORDER="0"></iframe>
</div>

<div id="centercontent">
<h1>centercontent</h1>
<pre>#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 201px;
margin-right:201px;
}</pre>
<p>This is the most elegant technique and perhaps the most sought after layout: a 3 column page with a fluid center column. Easy to understand, easy to implement. I first saw this layout at <a href="http://www.wrongwaygoback.com">dynamic ribbon device</a> and have since learned that the sweet CSS came from Rob Chandanais of <a href="http://www.bluerobot.com">BlueRobot</a>. Owen also made a very nice <a href="http://members.home.net/bigstripes/tutorial/css_3box_plus_topbox.html">tutorial</a> using this layout technique.</p>
<p>Read about the IE5x PC workaround in use on this page <a href="hacks.asp">here</a>.</p>
<p><strong>Scroll down for the source.</strong></p>
<p class="greek">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
</p>
<p class="greek">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit‡ de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. 
</p>
<br />
</div>

<div id="rightcontent">
<h1>rightcontent</h1>
<pre>#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#fff;
border:1px solid #000;
}</pre>
 <p>
This page is part of <a href="home.asp">CSS Layout Techniques</a>, a resource for web developers and designers.
</p>
<p>
Other Layout Techniques:<br/>
 <a href="7.asp">3 columns, the holy grail</a><br/>
<a href="9.asp">2 columns, ALA style</a><br/>
<a href="8.asp">4 columns, all fluid</a><br/>
<a href="2.asp">3 columns, all fluid </a><br/>
<a href="3.asp">static width and centered</a><br/>
<a href="1.asp">nested float</a><br/>
</p>
<p>
Does it <a href="http://validator.w3.org/check?uri=http://glish.com/css/7.asp?noSRC=true">validate</a>?
</p>
</div>

</body>
</html>

 

kopier til tekstfil og lagre som index.html

 

 

 

her er en forsøksside som skal i iframe'n

 

<html>

<body bgcolor="#006666">

<table bgcolor="#000000" width="100%">
<tr>
<td bgcolor="#996600">
Overskrift
</td>
</tr>
<td bgcolor="#009999">
Alle<br>
linkene<br>
Alle<br>
linkene<br>
</td>
</tr>
</table>

<table bgcolor="#000000" width="100%">
<tr>
<td bgcolor="#996600">
Overskrift
</td>
</tr>
<td bgcolor="#009999">
Alle<br>
linkene<br>
Alle<br>
linkene<br>
</td>
</tr>
</table>

<table bgcolor="#000000" width="100%">
<tr>
<td bgcolor="#996600">
Overskrift
</td>
</tr>
<td bgcolor="#009999">
Alle<br>
linkene<br>
Alle<br>
linkene<br>
</td>
</tr>
</table>

</body>

</html>

 

Kopier til tekstfil og lagre som left.html i samme mappe som index.html...

Endret av Andreasfe
Lenke til kommentar
Roberto

Roberto

Skrevet
Skrevet
PiRANhA: Har ingenting å si...

Jo det har det.

 

Jeg anbefaler deg å ikke bruke iframe men heller inkludere filen du ellers ville ha hatt inne i ifram-en inn i ditt gjeldende oppsett. Dette var grunnen til at jeg spurte om hva slags server siden din skal ligge på; ikke alle servere støtter slik dynamisk inkludering av eksterne sider. Vi er vel alle enige at inkludering av filer er bedre enn iframes, eller hva zethyr? :roll:

 

Du nevner du har Serve the world, da kan du vel enten benytte deg av SSI eller PHP sin include funksjon.

Lenke til kommentar
Andreasfe

Andreasfe

Skrevet
  • Forfatter
Skrevet (endret)

Takker!

 

men hvor skal jeg sette den inn

 

prøvde å sette den inn sånn her nå, og det funka ikke:

 

<div id="leftcontent">
<?php
include("left.html");
?>
</div>

 

der fungerte det med iframe..

 

 

må jeg kanskje lagre index som php?

Endret av Andreasfe
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...