Gestione sidebar..

[lizard88mc]

Salve..ho un problemino molto semplice...
Ho da fare un normalissimo sito internet con header, sidebar, maincontent e footer, basato su uno di quelli che si creano su dreamweaver...
Il mio problema è molto semplice...ho bisogno che il div siderbar, sia lungo sempre quanto il div maincontent, anche se il suo contenuto è largamente minore di quest'ultimo...insomma...la sidebar deve essere lunga quanto il maincontent...Come posso fare??

[Mauro Accornero]

Se hai una situazione in cui hai sidebar e maincontent flottanti ed entrambi si adattano al contenuto non ti conviene settare background o bordi su uno di questi due div, sarebbe meglio utilizzare un'immagine di background su un div che li contiene.

<div id="contenitore">
<div id="main">
</div>
<div id="sidebar">
</div>
</div>

In una situazione del genere il div contenitore si allunga fino al fondo del div con più contenuto, puoi inserire un'immagine di background e farla ripetere verticalmente per rendere la differenza tra main e sidebar.

[lizard88mc]

io ho questa situazione:

<div sidebar>
</div>
<div mainContent>
</div>

#sidebar {
float: left;
width: 200px;
padding: 15px 10px 15px 20px;
clear: left;
}

#mainContent {
margin: 0 0 0 250px;
padding: 0 20px;
}

Ora, cn il contenuto del maincontent maggiore di quello della sidebar, la lunghezza della sidebar non arriva fino in fondo al footer, neanche mettendo un'immagine che si ripeta come background..

[Mauro Accornero]

devi definire un div genitore di mainContent e sidebar così

<div id="contenitore">
<div id="mainContent">
</div>
<div id="sidebar">
</div>
</div>

e nel css definire la proprietà overflow:hidden per gestire il float

#contenitore{
overflow:hidden;
width:200px;}

così il div contenitore diventa visibile

[sanbombo92]

scusate ma io vorrei mettere una taskbar del genere: http://www.alessandrobasile.it/ .nel mio foro che e questo: http://pchi-tech.forumcommunity.net/ ... mi potreste dare una guida o tutorial ..vi dico nn so niente di ste cose ma vorrei metterla ... se riuscite a darmi i passaggi e il codice e meglio ..grazie a presto

[Mauro Accornero]

Se intendi la barra in basso ti è sufficiente fare un div e nel css definire un posizionamento assoluto per quel div in maniera che quando scrolla la pagina quello resta attaccato al fondo della finestra del browser.

div{
position:absolute;
bottom:0px;
}

[sanbombo92]

scusa ma devo solo mettere quel codice e mi verra fuori la barra con cosa???

nn sono bravo ..credo che mancano dei codici .... mi date i codici esatti di quella barra ??? in stile vista????

[Mauro Accornero]

se vuoi fare una formattazione come quella della grafica che hai postato è un discorso complesso, se vuoi realizzarla da solo sarebbe meglio se conoscessi almeno un po' di html o css sennò fatti aiutare da qualcuno che conosci che lo sappia fare. Di norma per queste cose si chiama una persona competente nel campo che ti fa un sito fatto bene tenendo conto di molti fattori, non si può sostituire una persona con delle competenze con qualche riga di codice. In questo forum si discute di problemi tecnici non si creano siti gratis, per quello sono certo che puoi trovare molti servizi online che offrono siti a costo 0.

[sanbombo92]

ho cercato ma l'unica cosa che o trovato e questa http://www.createblog.com/myspace-la...0-vista-glass/ pero devo isolare il codice che si riferisce alla taskbar .... se riesci a farmelo sei un grande anche perche non conosco nessuno che sia all'altezza ... nn metto fretta a nessuno



ecco i codici che ci sono ( li trovate anche nella stessa pagina ) :
Layout Code

Copy and paste to About Me

</p><div style="position: absolute; visibility: visible; top: 0px; left: 0px; width: 100%; height: 100%;"></div>    <div style="border: 3px double white; overflow: hidden; visibility: visible; position: absolute; left: 50%; text-align: center; font-size: 10px; text-decoration: none; top: 100%; font-family: segoe ui,arial; margin-left: -550px; background-color: lightBlue; color: rgb(102, 102, 102); width: 294px; height: 210px; margin-top: -249px;">
 <big><big>Vista Glass</big></big>
 <big>How To Use</big>
 This layouts a little tricky,
 Because I wasn't exactly trying to be userfriendly
 Also, the html is a bit sloppy,
 So bear with me :)

  Just search for the XXXXXX
 And replace it with your friendid
 Search for Name, and well that's obvious
 Change this text to your About Me
 Search for IMAGEURL,
 And replace it with the URL's of you're photo's
 And find the music and change it to what you want
 Blah blah blah, Use it now :) </div>      <div style="border: 3px double white; overflow: hidden; visibility: visible; position: absolute; left: 50%; text-align: center; font-size: 10px; text-decoration: none; top: 100%; font-family: segoe ui,arial; margin-left: -250px; background-color: lightBlue; color: rgb(102, 102, 102); width: 494px; margin-top: -250px; height: 212px;">
 [img]IMAGEURL[/img] [img]IMAGEURL[/img] [img]IMAGEURL[/img] [img]IMAGEURL[/img]


 [img]IMAGEURL[/img] [img]IMAGEURL[/img] [img]IMAGEURL[/img] [img]IMAGEURL[/img] </div>    <div style="border: 3px double white; overflow: hidden; visibility: visible; position: absolute; left: 50%; text-align: center; font-size: 10px; text-decoration: none; top: 100%; font-family: segoe ui,arial; margin-left: 250px; background-color: lightBlue; color: rgb(102, 102, 102); width: 304px; margin-top: -250px; height: 212px;">
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 My Favourite Artists
 </div>

Layout Code

Copy and paste to I'd Like to Meet

  <br style="margin-top: 190px;"/>     <p style="position: absolute; color: white; top: 100%; text-decoration: none; font-family: Segoe UI,Arial; text-align: center; left: 50%; font-size: 14px; margin-top: -25px; margin-left: -27px;">About Me </p>    <br style="margin-top: 190px;"/>     <p style="position: absolute; color: white; top: 100%; text-decoration: none; font-family: Segoe UI,Arial; text-align: center; left: 50%; font-size: 14px; margin-top: -25px; margin-left: -20px;">Photos </p>    <br style="margin-top: 190px;"/>     <p style="position: absolute; color: white; top: 100%; text-decoration: none; font-family: Segoe UI,Arial; text-align: center; left: 50%; font-size: 14px; margin-top: -25px; margin-left: -25px;">Music </p>    <div style="visibility: visible; position: absolute; left: 50%; font-family: Arial; width: 800px; margin-left: -400px; text-align: center; height: 200px; background-color: transparent; margin-top: 200px;">Name
 <form method="post" action="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX"> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value=""/> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value=""/> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=""/> <textarea style="border: 1px solid grey; text-align: center; background-color: rgb(34, 34, 34); color: white;" name="ctl00$cpMain$UserWriteCommentsControl$commentTextBox">Hello there,</textarea>
 <input type="submit" name="ctl00$cpMain$UserWriteCommentsControl$postcommentImageButton" value="Comment" style="text-align: center;"/> </form></div> <style type="text/css"> html body div table tbody tr td { position:absolute; top:180px; } .latestblogentry, .navigationBar, .extendednetwork, .friendspace, .friendsComments, .userProfileDetail, .userProfileSchool, .interestsAndDetails, .contactTable, .userProfileURL, table tbody tr td div font, table tbody tr td div div, .orangetext15, .profileinfo { display:none; } img.pic { border:1px solid dodgerblue; } img.wmpb:hover { opacity:0; } embed, object { height:0pt; left:0pt; position:absolute; top:0pt; width:0pt; } td, body { background-color:white; } .text { visibility:hidden; } a:link, a:visited { background-color:transparent; color:dodgerblue; } a.pics:hover { background:transparent none repeat scroll 0%; color:dodgerblue; } a:hover { color:lightblue; } a:active { color:dodgerBlue; } textarea:focus { color:dodgerblue; } </style>

[sanbombo92]

aspetto una risposta ... chi me lo fa o chi mi aiuta??