Skocz do zawartości

Problem z "divami"

lordmagic

Przez lordmagic
w HTML i CSS

Rekomendowane odpowiedzi

lordmagic Newbie

lordmagic

Opublikowano
Opublikowano

Moj problem polega na tym że nie wiem jak wstawić w centralnym bloku takie zaokrąglone obramowanie jak w menu, równocześnie zachowując jego właściwości (możliwość rozszerzania/kurczenia w pionie i poziomie)

https://lordmagic.ovh.org/dog_www/index.html

https://lordmagic.ovh.org/dog_www/style.css

https://lordmagic.ovh.org/dog_www/pic.htm

Odnośnik do komentarza
Udostępnij na innych stronach
Hellz Newbie

Hellz

Opublikowano
Opublikowano

Wydaje mi się, że jest rozwiązanie w necie i chyba nawet linki były w przyklejonym temacie z tego działu. W skrócie według mnie będzie to wyglądało tak:

na górze i na dole diva z tekstem w wstawiasz diva.top i diva.bottom. Nastepnie w divie.top wrzucasz 2 divy, ich wymiary mają odpowiadać wymiarom obrazków narożników, jednemu dajesz float: left; a drugiemu float: right; , nie mam za bardzo głowy, ale chyba będzie trzeba dać po tym element z clear: both; np. tak:

html:
<div class="top">
  <div class="top-left"></div>
  <div class="top-right"></div>
  <br class="clear" />
</div>
css:
.top { height: xx; background: url('image'); }
.top-left { height: xx; width: xx; float: left; background: url('image'); }
.top-right { height: xx; width: xx; float: right; background: url('image'); } 
.clear { clear: both; }

Powinieneś sobie dać radę, a jak nie, to szukaj w Google, bo na pewno jest rozwiązanie. Aha, kod może mieć błędy bo jestem po imprezie :) Pozdrawiam

Dała matka rozum? To kombinuj.

Odnośnik do komentarza
Udostępnij na innych stronach
camelleon Newbie

camelleon

Opublikowano
Opublikowano

Tu masz kod strony z zaokraglonymi naroznikami, nie wiem czy Ci to pomoze w tym co chcesz zrobic, ale moze sie przydac...

Fajny bo bez obrazkowych naroznikow :)

<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
 <meta http-equiv="reply-to" content="Adres_e-mail" />
 <meta name="generator" content="WebSite PRO 4.3" />
 <meta name="author" content="Autor_dokumentu" />
 <meta name="description" content="Opis" />
 <title>Bez Tytułu</title>
<style type="text/css">
body{padding: 20px;background-color: #FFF;
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<h1>Nifty Corners</h1>
<p>Auiiui  uieiouo auuaa oiaue uaou iioiiou uiio a io ieeoai uaouoe uoiaau eeauauou u oiauuie eo ui.</p>
<h2>Rounded corners without images</h2>
<p>Aaeao aiieuouiu io ueuiieu uei oeio uooiau uue ooiea ooiaui eue ouue i uiaoo iouieiuia uueeo ieieuiiau
ueaooa iou iaeieuo uoao iauoi u i oeioooe auo a ooe u uuuo oaooaae uoa iuiuiaeu iioaeu uuiu eeu ea eouoiuo ua o.</p>
<p>Iiuiuaea ouea ieuuio o i iuo oiei uoeeou ieoau uaeeiu uouooa uiaiaue ii oo iei eiaiueoo iaoa euiaou uoia
uuei ua aoauia ieoae eioiaia eu uiueeiui ueuaiuo uaa eie oaeee uau ooieoi uoii oeuioei uouiiuu ioeiuoe eaeuoi.</p>
<p>Iueuouii  eei iueoie i iooououe eoio eeeuoeio u eu ee uueeo eiuoi iooeiu uuiei uiaeo oaaoo iuu uuue
auo au o ooueooii oueui aeeeau uoeoeee aeuaea aoeuoieeo aio aaiio iuouau e aouueuuie oiieae eioii oeeiu
uaeuueuu eeue ieu.</p>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
</body>
</html>

Pozdrawiam

[bilety lotnicze] [strony www poznań]

"No se ganó Zamora en una hora"

Masz wolne domeny? Zaparkuj je! i zarabiaj!

Odnośnik do komentarza
Udostępnij na innych stronach
Elf Newbie

Elf

Opublikowano
Opublikowano

Proponuje abyś najpierw zobaczył jak te zaokrąglenia rozjeżdżają sie pod IE

Słowem - lepiej dokonaj optymalizacji dla większości popularnych wyszukiwarek.

Chyba przegladarek :D Polecam wiecej snu, mniej forum :)

Hellz, w Twoim rozwiazaniu tresc, np. tytul belki, ma byc w tym div.top? I mam go sobie pozycjonowac za pomoca padding?

Oficjalna strona serii Football Manager ( FM 2005, FM 2006 ) - CM Revolution

Forza MLKS Woźniki Śląskie!

Odnośnik do komentarza
Udostępnij na innych stronach
Hellz Newbie

Hellz

Opublikowano
Opublikowano
Hellz, w Twoim rozwiazaniu tresc, np. tytul belki, ma byc w tym div.top? I mam go sobie pozycjonowac za pomoca padding?

Tak, ale teraz widzę, że walnąłem byka w kodzie, którego zaraz poprawię :D Musicie wybaczyć, byłem na sporym kacu :) W div.top wrzucasz dowolną treść, najlepiej w diva z ustaloną szerokością i z float: left; , bo z tego co pamiętam, na jakiejś przeglądarce bez tego się rozsypywało. Pozdrawiam

Dała matka rozum? To kombinuj.

Odnośnik do komentarza
Udostępnij na innych stronach

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności