Ho il seguente layout e questo problema: dovrei mostrare "TITOLO DELL'ARTICOLO" immediatamente sotto "CONTENUTO IN EVIDENZA". Purtroppo utilizzando la sidebar (un banner 300x700 che può variare in altezza) questo non avviene, e "TITOLO DELL'ARTICOLO" viene mostrato successivamente alla fine della sidebar. Consigli? Grazie
file csscodice:<html> <head> <title>.</title> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.0/css/font-awesome.min.css"/> <link rel="stylesheet" type="text/css" href="css/css.css"/> </head> <body> <div id="container"> <div id="header"> <div class="wrapper"> <img class="classname" src="img-sito/logo.jpg" alt="" /> </div> </div> <div id="menu"> <ul> <li class="home2"><a href="/"><i class="fa fa-home"></i></a></li> <li class="home"><a href="/calciomercato/">Reggio Calabria</a></li> <li class="home"><a href="/video/">Catanzaro</a></li> <li class="home"><a href="/esclusive/">Cosenza</a></li> <li class="home"><a href="/interviste/">Crotone</a></li> <li class="home"><a href="/campionato/">Vibo</a></li> <li class="home"><a href="/coppe/">Sicilia</a></li> <li class="home"><a href="/nazionale/">Altre regioni</a></li> <li class="home"><a href="/sondaggi/">Sport</a></li> </ul> </div> <div class="item-evi"> <h2>Contenuto in evidenza</h2> <p>Testo dell'articolo, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="item-evi"> <h2>Contenuto in evidenza</h2> <p>Testo dell'articolo, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div id="content"> <div class="articolo"> <img src="img/times-square.jpg" /> <h2>Titolo dell' articolo</h2> <p>Testo dell'articolo, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="articolo last"> <img src="img/times-square.jpg" /> <h2>Titolo dell' articoloaa</h2> <p>Testo dell'articolo, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="clear"></div> <div class="item-evi"> <h2>Info</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> <div class="item-evi"> <h2>Info</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="item-evi"> <h2>Info</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="footer"><p>Footer</p></div> </div> </body> </html>
codice:#menu { background: #2A99D1; height: 50px; line-height: 25px; border-top: solid 1px #FFF; } #menu ul { list-style-type: none; } #menu li { float: left; border-right: solid 1px #72BCE2; } #menu a { display: block; color: #FFF; padding: 0 10px; transition: background 0.5s; text-shadow: 1px 1px 1px #2A3950; } #menu a:hover { background: #72BCE2; } #menu .home { font-size: 18px; } #menu .home2 { font-size: 18px; } html,body{margin:0;padding:0;} body{margin:0; padding:0;background: #e2e2e0; color: #666;font: 16px/28px;font-family: 'Open Sans', sans-serif; line-height:22px;} h1,h2{font-family:oswald;text-transform:uppercase;font-weight:normal;} a{color:#21aabd;text-decoration:none;} a:hover{color:#333;text-decoration:underline;} #container {width: 960px;margin: 0 auto;background:#fff} /*** Header ***/ #header {width:920px;padding:19px;} #header h1 {color:#fff;} /*** Nav ***/ #nav {width:960px;background:#666;color:#fff;} #nav a {color:#fff; padding:15px 20px;display:inline-block; text-decoration:none; text-transform:uppercase;font-family:oswald;} #nav a:hover{background:#333;} /*** Slider ***/ .slider-wrapper {width:100%;} /*** Contenuto evi ***/ .item-evi {width:300px;padding:10px;float:left;} /*** Messaggio ***/ #mes-full {width:920;padding:20px;clear:both;background: #e2e2e0;} #mes-full p {font-family:oswald;text-transform:uppercase;font-weight:normal;font-size: 28px;} /*** Contenuto ***/ #content {width:300px;padding:20px;float:left;} #content .articolo {border-bottom:1px solid #eee;min-height:190px;padding:0px 0 10px 0;} #content .articolo img{float:left;margin: 0 20px 0 0;} #content .last {border-bottom:none;} /*** Sidebar ***/ #sidebar {width:280px;padding:10px;float:left;} /*** Footer ***/ #footer {width:920px;padding:20px;clear:both;background: #666;color:#fff} /* Clear */ .clear{width:100%;clear:both;height:1px;background:#eee;} .wrapper { position: relative; width: 100%; height:190px; border: 1px solid black; } img.classname{ position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%, -50%); transform: translate(-50%,-50%); }
Rispondi quotando