Rýchla pomoc html/css aside please

Programovacie jazyky, rady, poradňa...
Eazy
Amateur
Amateur
Príspevky: 16
Registrovaný: 14 nov 2015, 22:44

Rýchla pomoc html/css aside please

Príspevok od používateľa Eazy »

čaute potrebujem rychlo pomoct nejako sfungovať aside na mojej stránke.
Ani za boha neviem dat ten aside zarovno toho článku a zbaviť sa tej medzery. Dík za pomoc chaloši. Posielam screen jak to vyzerá a posielam aj kód.
https://ctrlv.cz/k3Y7


HMTL -
Spoiler

Kód: Vybrať všetko

<aside>
<div id="sponsors">
                <header id="s_header">
                    <h1>SPONZORI</h1>  
                </header>
                <img id="main_sponsors" src="images/wd.png" alt="wd" title="wd">
                <img src="images/dell.png" alt="dell" title="dell">
                <img src="images/intel.png" alt="dell" title="intel">
                
            </div>

</aside>
CSS (môžte si dat ctrl+f - aside alebo sponzori aby ste sa dostali priamo k tomu, ale dal som radšej celé CSS, lebo sa bojím či to nieje niekde inde chyba)
Spoiler

Kód: Vybrať všetko

#nazov{
	width: 50%;
	height: 3vw;
	background: red;

  clear: both;
	line-height: 3vw;
	text-align: center;
	font-family: arial;
	font-size: 20px; 
	color: white;
}

#clanoktext {
color: white;
background-color: black;
width: 50%;

}




nav {
  background: black;
  height: 3vw;
  padding: 0;
}

nav a {
  text-decoration: none;
}

nav ul.menu {
  height: 100%;
  width: 80%;
  font-size: 0;
  margin-left: 100px;
}

nav ul.menu li {
  border-right: 1px solid #464939;
  color: rgb(255,255,255);
  display: inline-block;
  line-height: 3vw;
  width: 24%;
  text-align: center;
  font-size: 1.2vw;
  font-family: Arial Rounted MT, Arial, Tahoma, Verdana;
  position: relative;
}

nav ul.menu li:first-child {
  border-left: 1px solid #464939;
}

nav ul.menu li:hover {
  background-color: red;
}

nav ul.menu li:hover ul.hover_menu {
  display: list-item;
  z-index: 1;
}


a { 
	font-weight: bold; 
}

a:link, a:visited { 
	text-decoration: none; 
	color: #333; 
}	

a:hover, a:active {  
	color: #FFFFFF; 
}





/* container */

#container {
  width: 80%;
  margin: 0 auto;
  padding: 0.5vw 0 0.5vw 0;
}



/* sponzori */

aside {
  width: 29%;
  float: right;
  margin: 0 0 1vw 0; 
}

#sponsors {
  width: 50%;
  text-align: center;
  border: 0.1vw solid red;
  border-top: none;
  display: block;
  float:right; 

  
}

#sponsors img{
  height: 2vw;
  padding: 0.3vw 0 0.3vw 0;
  border: 1px solid red;
  margin: 0 0.2vw 0 0.2vw;
}




#sponsors header#s_header {
  background-color: red;
  margin: 1vw 0 1vw 0;
}

#sponsors header#s_header h1{
  padding: 0.6vw 0 0.6vw 0;
  text-align: center;
  font-size: 1.2vw;
  color: #FFFFFF;
  text-transform: uppercase;
  font-family: Arial Rounted MT, Arial, Tahoma, Verdana;
}



footer{
  width:68%;
  height: 3vw;
  background: red;
  margin: 0 auto;
  text-align: center;
  line-height: 3vw;
  clear: both;
}
footer p{
  color: white;
  font-family: arial; 
}
Dufam, že pomôžete. Potrebujem to dost rýchlo.
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Re: Rýchla pomoc html/css aside please

Príspevok od používateľa audiotrack »

nie som si istý či som pochopil čo chceš, ale tých sponzorov máš vpravo a článok vlavo, lebo aside má float: right. Trebalo by ale vidieť kontext, neviem kde je ten článok v html (či pred tým asidom alebo za a podobne) a možno tam ten float má opodstatnenie. Potom to ale treba riešiť úpravou štruktúry html a nie iba v cssku
Eazy
Amateur
Amateur
Príspevky: 16
Registrovaný: 14 nov 2015, 22:44

Re: Rýchla pomoc html/css aside please

Príspevok od používateľa Eazy »

Skusal som davat ten article aj pod aj nad aside v html ale to nepomohlo. Mam teda dodat cele html? Kludne by som ti to ukazal aj cez teamviewet ale neviem ci chces. Ked pridem domov tak mozme cosi vymyslet. Do piatku to musim spravit.

Celé HTML, dufam že dakto pomože:
Spoiler

Kód: Vybrať všetko

<body background="images/background.jpg">
  
<nav>
<ul class="menu">
            <li>Prve</li>
                
            <li>Druhe</li>
            <li>Tretie</li>
                
            <li>Stvrte</li>
                
            
        </ul>

</nav>







<article>
<div id="nazov">Luminosity je výhercom turnaja MLG Columbus 2016</div>


<div id="clanoktext">V USA sa skončil major turnaj v jednej z najobľúbenejších hier na svete,<br> 
MLG Counter-Strike: Global Offensive Major Championship: Columbus.<br> 
Spoľahlivým meradlom prestíže esportového turnaja je cena pre najlepšie tímy a obzvlášť pre víťaza.<br> 
A tento bol veľmi prestížny. MLG svoj hlavný turnaj podporilo rovným miliónom dolárov, ktoré sa delili medzi 16 tímov hlavného turnaja.<br>
 Víťaz, brazílsky tím Luminosity Gaming, si domov odniesol polovicu tejto sumy - 500 000 USD.<br>
Luminosity nadviazalo na výborné výsledky z konca roka 2015 a parádne si načasovalo najlepšiu formu.<br> 
Vo veľkom finále narazilo na ďalší skvelý tím - ukrajinský Natus Vincere so slovenským hráčom GuardiaNom.<br> 
Natus Vincere cestou do finále nemilosrdne drtil všetkých súperov, ale Brazílčanom sa musel pokloniť po dvoch odohraných mapách.<br> 
Na mape Mirage sa rozhodlo až v predĺžení, ale hra na Overpass sa už niesla v réžii konečného víťaza.

Poradie všetkých tímov:<br>
1.	Luminosity Gaming	$500,000<br>
2.	Natus Vincere	$150,000<br>
3.-4.	Astralis<br>
Team Liquid	$70,000<br>
5.-8.	Ninjas in Pyjamas<br>
Fnatic<br>
Counter Logic Gaming<br>
Virtus.Pro	$35,000<br>
9.-12.	Mousesports<br>
FaZe Clan<br>
Gambit Gaming<br>
G2 Esports	$8,750<br>
13.-16.	Flipsid3 Tactics<br>
Splyce<br>
EnVyUs<br>
Cloud9<br>
</div>


</article>

<aside>
<div id="sponsors">
                <header id="s_header">
                    <h1>SPONZORI</h1>  
                </header>
                <img id="main_sponsors" src="images/wd.png" alt="wd" title="wd">
                <img src="images/dell.png" alt="dell" title="dell">
                <img src="images/intel.png" alt="dell" title="intel">
                
            </div>

</aside>







<footer>
        <p>&copy; 2016 Všetky práva vyhradené | Vytvoril Roman</p>

    </footer>

  </body>
S.T.E.A.L.T.H
Light Professional
Light Professional
Používateľov profilový obrázok
Príspevky: 933
Registrovaný: 31 jan 2010, 14:44
Bydlisko: Pegasus Galaxy

Re: Rýchla pomoc html/css aside please

Príspevok od používateľa S.T.E.A.L.T.H »

Ty hlavne napis co presne chces, lebo sa vyjadrujes tak, ze to z toho nie je jasne.
Co znamena zarovno clanku (kde zarovnat) a akej medzery?
audiotrack
VIP
VIP
Používateľov profilový obrázok
Príspevky: 25958
Registrovaný: 09 sep 2005, 18:39
Kontaktovať používateľa:

Re: Rýchla pomoc html/css aside please

Príspevok od používateľa audiotrack »

poičkať, ty to chceš mať hore zarovnané ako je článok ale vpravo? Ja som to pochopil že pod článkom to má pokračovať.. fakt treba napísať presne čo chceš, lebo z obrázku a bez html je to iba o hádaní
Eazy
Amateur
Amateur
Príspevky: 16
Registrovaný: 14 nov 2015, 22:44

Re: Rýchla pomoc html/css aside please

Príspevok od používateľa Eazy »

audiotrack napísal:poičkať, ty to chceš mať hore zarovnané ako je článok ale vpravo? Ja som to pochopil že pod článkom to má pokračovať.. fakt treba napísať presne čo chceš, lebo z obrázku a bez html je to iba o hádaní
Ten članok aby bol v strede a napravo od neho ten aside. Samozrejme aby aj ten začinal uplne navrchu pri menu. Zajtra to musím odovzdat a dnes som bol celý den preč takže asi RIP. :smt017

//autoeditácia príspevku (12 Máj 2016, 20:15)
BTW. To HTML je celé v spojleri v mojom poslednom príspevku.
S.T.E.A.L.T.H
Light Professional
Light Professional
Používateľov profilový obrázok
Príspevky: 933
Registrovaný: 31 jan 2010, 14:44
Bydlisko: Pegasus Galaxy

Re: Rýchla pomoc html/css aside please

Príspevok od používateľa S.T.E.A.L.T.H »

V prilohe to mas ako tak spravene. Zatial. Neiem prist na to, preco ma ten aside margin. Inak je to dobry bordel kod.

Edit: vlastne ak teraz lepsie kukam, tak nema nai margin, ale kvazi padding.

//autoeditácia príspevku (12 Máj 2016, 23:23)
Toto by uz malo fungovat. Len to mozno bude treba mierne na novo nastylovat lebo som to poriesil pouzitim

Kód: Vybrať všetko

* { margin: 0; padding: 0 }
a to som si naivne myslel, ze podobne kraviny su uz prezitok, ze sa snad ten vyvoj dostal niekam inde.

Edit: snad nakoniec vyriesene aj bez tych blbosti, dufam, ze nie neskoro (file aside_final)
Prílohy
aside.zip
(2.12 KiB) 94 stiahnutí
aside_novy.zip
(2.13 KiB) 91 stiahnutí
aside_final.zip
(2.13 KiB) 104 stiahnutí
Eazy
Amateur
Amateur
Príspevky: 16
Registrovaný: 14 nov 2015, 22:44

Re: Rýchla pomoc html/css aside please

Príspevok od používateľa Eazy »

Mam to. Este je na tom roboty jak na kostole ale hadam to uz dorobim sam. Diky za pomoc. Kuknem sa na pc jak si to vlastne spravil. Dik.
Napísať odpoveď