• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tekst w css obok obrazka

Aruba Cloud - Virtual Private Server VPS
+1 głos
6,087 wizyt
pytanie zadane 17 maja 2015 w HTML i CSS przez adamek0123 Obywatel (1,530 p.)
Zrobiłem sobie takie coś jak ostronie i tam chcę zrobic aby tekst był obok obrazka (obrazek z fontello.com) jak zrobić aby był koło obrazka ?

 

Css (przezemnie napisany) i troszkę ściągnołem od pana mirosława ;)

body
{
background-color:#808080;
margin: 0;
padding: 0;
}

#pudlo
{
width:1000px;
margin-left: auto;
margin-right: auto;
}

#menu
{
background-color:#45C0F5;
color: #ffffff;
display: block;
font-size:36px;
padding: 20px;
opacity: 0.8;

}

.opcja
{
float:right;
min-width:50px;
height:25px;
font-size:18px;
padding:10px;
border-right: 2px dotted #444444;
}

.opcja:hover
{
background-color: #34B0E4;
cursor: pointer;
}

#ostronieL
{
background-color:white;
text-align: left;
}

.ostronieP
{
text-align:center;
}

 

#menuL
{
    margin:10px;
    float: left;
    width: 142px;
    min-height: 300px;
    padding:20px;
    background-color:#ffffff;
    text-align: center;
    font-size: 18px;
    border-right: 2px;
}

.opcjaL
{
    font-size:18px;
    height:25px;
    padding: 10px;
    border-bottom: 2px;
}

.opcjaL:hover
{
background-color: #949494;
cursor:pointer;
color:white;
}

 

Plik fontello

 

 
.icon-windows:before { content: '\e800'; font-size:80px; margin:30px;} /* '' */

 

i html

 

        <div id="menu">
        <div class="opcja">Strona Główna</div>
        <div class="opcja">link1</div>
        </div>
        
            <div id="ostronieL">
            <i class="demo-icon icon-windows"></i>

            <div class="ostronieP">
            tutaj tekst okok obrazka
            </div>

    <div id="menuL">
    <div class="opcjaL">dewf
    </div>
    </div>

3 odpowiedzi

+1 głos
odpowiedź 17 maja 2015 przez robert9620 Stary wyjadacz (11,640 p.)
mozesz napisać tekst w jakimś znaczniku Np <p> i dać mu jakieś id lub classe i później w css dać mu position: Absolute, i ustawić go za pomocą top: Wartość w px i left : Wartość w px. Jest jeszcze Right i bottom
komentarz 17 maja 2015 przez adamek0123 Obywatel (1,530 p.)
mogę prosić o kod ?
komentarz 17 maja 2015 przez jaca121212 Nałogowiec (40,760 p.)
komentarz 17 maja 2015 przez adamek0123 Obywatel (1,530 p.)

tylko ten obrazek to tekst obok obrazka 

komentarz 17 maja 2015 przez adamek0123 Obywatel (1,530 p.)

i jeszcze kod css jak to jest zrobione 

 

#ostronie
{
background-color:#006AFF;
text-align: left;
margin-top:5px;
}

 

 

a tutaj fontello

 

}
 
.icon-windows:before { content: '\e800'; font-size:85px; margin:10px;} /* '' */

komentarz 17 maja 2015 przez Czort Nałogowiec (32,500 p.)
Jak ma to wyglądać jak na tym obrazku mniej więcej, to zrób sobie diva w którym umieścisz dwa divy (jeden z obrazkiem fontello, drugi z tekstem), oba z atrybutami float: left;

Powinno działać po wystylizowaniu.
+1 głos
odpowiedź 17 maja 2015 przez jaca121212 Nałogowiec (40,760 p.)
komentarz 17 maja 2015 przez adamek0123 Obywatel (1,530 p.)
edycja 17 maja 2015 przez adamek0123
nie oto chodziło
0 głosów
odpowiedź 18 maja 2015 przez marcin_w Gaduła (3,190 p.)
edycja 18 maja 2015 przez marcin_w

Trochę tutaj pozmieniałem bo np w cssie dodałeś #pudlo co jak się domyślam jest odpowiednikiem containera. Tekst jest obok okienka windows, a jeżeli coś jest nie tak to zawsze możesz to zmienić. Zmodyfikowałem też menu z przyciskami link1 i Strona Główna ponieważ trochę przeszkadzały.

 

HTML

 

  <div id="pudlo">   
    
    <div id="menu">
        <div class="opcja">Strona Główna</div>
        <div class="opcja">link1</div>
        </div>
        
<div id="ostronie">      
                
      <div class="ostronieL">
         <i class="demo-icon icon-windows"></i>
      </div>
       
      <div class="ostronieP"><span>tutaj tekst  obrazkaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </span> <span> aaaaaaaaaaaaa</span> </div>
                   
</div>
    
    <div id="menuL">
       <div class="opcjaL">dewf</div>
    </div>
     
</div>

 

 

CSS

 

body
{
 background-color:#808080;  
}

#pudlo
{
width: 1000px;
margin-left: auto;
margin-right: auto;

    
}

#menu
{
background-color:#45C0F5;
color: #ffffff;
min-height: 50px;
font-size:36px;
padding: 20px;
opacity: 0.8;
width: 960px;

}

.opcja
{
float: right;
min-width:50px;
height: 20px;
font-size:18px;
padding:15px;
border-right: 2px dotted #444444;
margin-bottom: 0px;
}

.opcja:hover
{
background-color: #34B0E4;
cursor: pointer;
}

#ostronie 

background-color:#006AFF; 
text-align: left; 
margin-top:5px;
width: 1000px;
min-height: 100px;

}

.ostronieL
{
 float: left;
 width: 95px;
 height: 100px;
}

.ostronieP
{
 
 float: left;
 text-align: left;
 margin-right: auto;
 margin-left: auto;
 min-height: 100px;
 width: 905px;
 display: inline-block;
 
}

#menuL
{
    margin-top: 10px;
    float: left;
    width: 142px;
    min-height: 300px;
    padding:20px;
    background-color:#ffffff;
    text-align: center;
    font-size: 18px;
    border-right: 2px;
}

.opcjaL
{
    font-size:18px;
    height:25px;
    padding: 10px;
    border-bottom: 2px;
}

.opcjaL:hover
{
background-color: #949494;
cursor:pointer;
color:white; 
}

 

W pliku fontello.css

.icon-windows:before { content: '\e805'; font-size: 85px; margin-left: 5px; margin-top: 5px;  } /* '' */

 

komentarz 18 maja 2015 przez adamek0123 Obywatel (1,530 p.)
a jak dopasować pasek menu to automatycznej rozdzielczości ekranu tak aby auto było
komentarz 18 maja 2015 przez marcin_w Gaduła (3,190 p.)

To już masz wpisane w #pudlo, (margin-left: auto;margin-right: auto;) jeśli chcesz to dopisz je do pozostałych sekcji w CSS.

komentarz 19 maja 2015 przez adamek0123 Obywatel (1,530 p.)

"dopisz je do pozostałych sekcji w CSS." nie rozumiem mogę peosić o wytłumaczenie i jaka to bedzie sekcja ? 

komentarz 19 maja 2015 przez marcin_w Gaduła (3,190 p.)

Sekcje #menu i #menuL tutaj, jednak moim zdaniem nie ma takiej potrzeby wprowadzania tego bo już masz to wprowadzone w #pudlo w którym znajduje się cała strona. Zobacz sobie na kod Pana Mirka z 2 odcinka CSS tam wpisał tylko margin-left: auto; i margin-right: auto; do sekcji #container.

#menu 

background-color:#45C0F5; 
color: #ffffff; 
min-height: 50px; 
font-size:36px; 
padding: 20px; 
opacity: 0.8; 
width: 960px;

margin-right: auto; 
margin-left: auto; 

}

#menuL 

    margin-top: 10px; 
    float: left; 
    width: 142px; 
    min-height: 300px; 
    padding:20px; 
    background-color:#ffffff; 
    text-align: center; 
    font-size: 18px; 
    border-right: 2px; 

margin-right: auto; 
margin-left: auto; 
}

 

Podobne pytania

0 głosów
1 odpowiedź 1,143 wizyt
pytanie zadane 18 sierpnia 2018 w HTML i CSS przez rejzer Użytkownik (680 p.)
0 głosów
1 odpowiedź 4,992 wizyt
pytanie zadane 28 czerwca 2016 w HTML i CSS przez Ziuziek Mądrala (5,140 p.)
0 głosów
2 odpowiedzi 467 wizyt
pytanie zadane 11 listopada 2015 w HTML i CSS przez MatiiTv Gaduła (3,800 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...