« 1 2 »
Autor Zpráva
haluska
Profil *
Jsem začátečník s CSS a právě tvořím stránky s třísloupcovým layoutem. Do prostředního sloupce mi nejde vkládat obrázky, nezobrazí se mi. Udělá se mi tam místo na ten obrázek, ale obrázek tam není. Ať tam ten obrázek dám pozicovaně, nebo normálně, není vidět. Co s tím?
mat
Profil
a jak ten obrázek vkládáš? Normálně přes <img src...> nebo ho vkládáš přes externí css jako obrázek na pozadí?

Já bych si tipnul, že normálně přes <img src...> a máš špatně nastavenou cestu k obrázku...

hoď sem link, pak se radí snáze...
haluska
Profil
Zatím to nikde není, tak posílám kousek kódu. Upřesněno: První obrázek je v pohodě, ten tam je.
U druhého, jak vidno, nejsou zadány rozměry, ale zobrazí se tam místo tak velké jako ten obrázek. Cesta k obrázku je dobře. Když dám aktualizovat, ten obrázek tam problikne.

<div class="hlavni">
<span style="position: absolute; top: 17px; left: 20px; z-index: -1"><img src="img/klika.gif"></span>
<span style="position: absolute; top: 50px; left: 40px"><h1>Úvodem...</h1></span><br>
<p><img src="img/robert.jpg" align="right">
Tady by mělo být něco, co Robert každý měsíc vyprodukuje, bude to prudce aktuální a důležité sdělení...blabla</p>
</div>
Leo
Profil
Nejspis ho mate prekryty nejakou to absolute umistenou opicarnou, Leo
Yuhů
Profil
nebo se ten obrázek ve skutečnosti jmenuje Robert.jpg s velkým R
Michalek
Profil
nebo s velkym JPG - to se stava reba u digit. fotaku -> z toho plyne zkontrolovat si nazev obrazku, pokud by to nebylo jasne
habendorf
Profil
Yuhů, Michalek: Kdyby bylo špatně jméno obrázku, tak by tam neproblikával, jak píše tazatel. Podle toho abs. napozicování toho spanu si myslím, že pravdu má Leo.
haluska
Profil
Tak to vypadá, že se ten obrázek nějak nesnese s textem. Když tam nedám align, tak je normálně vidět. Ale to je z estetického hlediska zcela nepoužitelné...
habendorf
Profil
haluska: Asi bude nejlepší to někam uploadnout a dát sem link. Takhle se můžem jen dohadovat.... Jak je např. definována class="hlavni"?
Leo
Profil
"Když tam nedám align, tak je normálně vidět."

Treba proto, ze je pak uplne jinde? :-) Leo
haluska
Profil
www.haluska.cz/cbzbr

Tak tady to je
haluska
Profil
A hele, ono to je ve firefoxu vidět, není to vidět jen v IE...
habendorf
Profil
Problém je někde ve stylech - při vypnutí stylů se obrázek zobrazí dobře. Na větší analýzu teď bohužel nemám čas.
haluska
Profil
habendorf: dík aspoň za snahu. Já to s těma stylama fakt vzdávám...
mat
Profil
to absolutní pozicování je podle mě k ničemu, zkus tohle - klasický třísloupcový layout:

body {
background-color: #2b3856;
padding: 0px;
margin: 0px;
font-family: times, serif;
color: #000000;
font-size: 14px;
}

.levy {
float: left;
width:150px;
background-color: #2b3856;
color: #FFFF60;

}

.pravy {
float: right;
width:150px;
background-color:#FFFF99;
color: #2b3856;

}

.hlavni {

margin: 0 150px;
background-color: #FFFF99;
color: #003380;
padding: 10px;
}


.hlavicka {
height: 120px;
background-color: #2b3856;
padding: 10px;
}

a {
color: #000000;
text-decoration: underline;
}

a: hover {
color: #800000;
text-decoration: underline;
}

.levy a {
font: bold;
color: #FFFF60;
text-decoration: none;

}

.levy a:hover {
color: #FFFF60;
text-decoration: none;
background-color: #10428C;

}

.levy a:visited {
color: #FFFF60;
text-decoration: none;

}

.levy a:active {
color: #FFFF60;
text-decoration: none;
background-color: #10428C;

}

.hlavni h1 {
font-family: arial;
font-size: 20px;

}

.hlavni p {
text-indent: 30px;

}

.pravy h1 {
font-family: arial;
font-size: 16px

}

- v kódu pak dej sloupec hlavní až pod pravý a levý a vyhaž všechny ty pozicované spany - ty kulaté hrany a umístění obrázků pak už dolaď přes css...

víc času nemám, hrej si s tím trochu, tak se naučíš nejvíc...

- a dolů přidej patičku, kde můžeš dát kontakty apod a dej jí v css clear: both;
haluska
Profil
mat: díky, zkusím.
habendorf
Profil
Akutní neelegantní řešení: z .hlavni vyhoď position: relative; a obrázek tam bude. Celkově by to ale chtělo asi úplně překopat.
haluska
Profil
habendorf: už se stalo :)
habendorf
Profil
Fajn, už tam Roberta v IE vidím :o)
haluska
Profil
Do Prčic... v tom firefoxu to vypadá ale hrozně...
mat
Profil
omyl, to jen IE se tváří, jako že zobrazuje stránku dobře...:))

stránku teď budeš muset doladit - hrát si s paddingy, marginy, hovery apod. - to vykousnutí nahoře ti dělá ten absolutně pozicovaný kulatý růžek - více info např. zde v diskuzi: tady

p.s. a dodělej tu patičku

a ještě něco - jestli s css začínáš, tak se na nějaké kulatosti vykašli - zkus dát třeba těm sloupcům kontrastní pozadí, dej jim nějaký border atd. atd.
haluska
Profil
hm, už jsem ten růžek dala pryč a furt to tam je. Kdepak, ať žijou tabulky!

patičku až večer, až budou děti spát...
mat
Profil
jak jsem psal výše smaž všechny <span></span> u obrázků v hlavním sloupci - všechny - pak bude tvá stránka vypadat takhle:
tvoje stránka v mozzile s vyhozenými spany
haluska
Profil
mat: dik za tu práci, ale já mám holt svou představu...
ale máš pravdu, to fakt nejde...
haluska
Profil
mat: všechny spany jsem dala pryč, a přece tam to vykousnutí je...
mat
Profil
to vykousnutí nahoře ti dělá ten absolutně pozicovaný kulatý růžek - více info např. zde v diskuzi:


to vykousnutí asi spíše dělají ty spany v hlavičce - vyhoď všechny spany... - pak ta stránka bude vypadat jako tak na tom screenshotu...
haluska
Profil
Nene, dala jsem pryč úplně všechny obrázky a bylo to tam...
mat
Profil
v kódu tvé stránky je toto:

<div class="hlavicka">

<span style="position: absolute; top: 10px; left: 10px"><a href="index.htm"><img src="img/logo1.gif" border="0"></a></span>
<span style="position: absolute; top: 10px; left: 120px"><img src="img/cblogo1.gif"></span>
<span style="position: absolute; top: 0px; right: 0px"><img src="img/vers01.jpg"></span>
</div>

udělej z toho toto:

<div class="hlavicka">

<a href="index.htm"><img src="img/logo1.gif" border="0"></a>
<img src="img/cblogo1.gif">
<img src="img/vers01.jpg">
</div>
haluska
Profil
Už jsem to vyřešila tabulkou... teď jdu na to mrknout...
haluska
Profil
hm, tak je to tam i s tabulkou, zkusím tam teda jen tak naplácat obrázky, jak radíš...
« 1 2 »
Toto téma je uzamčeno. Odpověď nelze zaslat.