Tekst w css obok obrazka

Question

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>

Answer 1

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

Comments

mogę prosić o kod ?

---

http://jsfiddle.net/jaca121212/zkx9k143/2/

---

tylko ten obrazek to tekst obok obrazka 

---

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;} /* '' */

---

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.

Answer 2

http://jsfiddle.net/jaca121212/zkx9k143/1/

Comments

nie oto chodziło

Answer 3

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;  } /* '' */

 

Comments

a jak dopasować pasek menu to automatycznej rozdzielczości ekranu tak aby auto było

---

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

---

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

---

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; 
}