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

Tekst obok obrazu CSS3

Object Storage Arubacloud
0 głosów
226 wizyt
pytanie zadane 10 września 2017 w Grafika i multimedia przez PeterPkp123 Nowicjusz (160 p.)

Witam, mam problem :) Otóż chciałbym stworzyć swoją stronkę internetową. Ok, strona startowa gotowa. Czas na odnośnik "Blog". Niestety potrzebuję, by tekst pojawił się obok obrazka...

CSS3:

body
{
    font-family: 'Saira', sans-serif;
    background-image: url("background.png");
}

#title
{
	padding-top: 2px;
    padding-left: 34px;
    background-color: rgba(0, 0, 0, 0.30);
	color: #39a5f1;
	width: 385px;
	height: 97px;
	border-bottom: solid #00FF9D;
	border-top: solid #00FF9D;
	border-width: thin;
	margin-bottom: -130px;
}

.abc
{
	padding-left: 74px;
	text-align: center;
	float: left;
	font-size: 25px;
	margin-left: 450px;
	width: 809px;
	height: 99px;
	border-bottom: solid #39a5f1;
	border-top: solid #39a5f1;
	border-width: thin;
	background-color: rgba(0, 0, 0, 0.30);
}

.aone
{
	margin-top: 28px;
	width: 74px;
	transition: all 0.5s ease-in-out;
	float: left;
}

.aone:hover
{
	background-color: #3955f1;
}

.atwo
{
	margin-top: 28px;
	width: 124px;
	transition: all 0.5s ease-in-out;
	float: left;
	margin-left: 55px;
}

.atwo:hover
{
	background-color: #3955f1;
}

.athree
{
	margin-top: 28px;
	width: 71px;
	transition: all 0.5s ease-in-out;
	float: left;
	margin-left: 55px;
}

.athree:hover
{
	background-color: #3955f1;
}

.afour
{
	margin-top: 28px;
	width: 84px;
	transition: all 0.5s ease-in-out;
	float: left;
	margin-left: 55px;
}

.afour:hover
{
	background-color: #3955f1;
}

.afive
{
	margin-top: 28px;
	width: 107px;
	transition: all 0.5s ease-in-out;
	float: left;
	margin-left: 55px;
}

.afive:hover
{
	background-color: #3955f1;
}

#content
{
	margin-top: 30px;
	background-color: rgba(0, 0, 0, 0.30);
	color: #FFFFFF;
	padding-left: 13px;
	border-top: solid greenyellow;
	border-bottom: solid greenyellow;
	border-width: thin;
	width: 850px;
	height: 390px;
	float: left;
}

#something
{
	margin-top: 30px;
	text-align: center;
	color: white;
	margin-left: 30px;
	background-color: rgba(0, 0, 0, 0.30);
	width: 440px;
	height: 390px;
	float: left;
	border-top: solid #F7DE00;
	border-bottom: solid #F7DE00;
	border-width: thin;
	margin-bottom: 30px;
}

.a
{
	margin-left: 10px;
	float: left;
	transition: all 0.5s ease-in-out;
}

.a:hover
{
	transform: scale(1.1);
}

.b
{
	margin-left: 10px;
	transition: all 0.5s ease-in-out;
	float: left;
}

.b:hover
{
	transform: scale(1.1);
}

.c
{
	margin-left: 10px;
	transition: all 0.5s ease-in-out;
	float: left;
}

.c:hover
{
	transform: scale(1.1);
}

.d
{
	margin-left: 10px;
	transition: all 0.5s ease-in-out;
	float: left;
}

.d:hover
{
	transform: scale(1.1);
}

.e
{
	margin-top: 10px;
	margin-left: 10px;
	transition: all 0.5s ease-in-out;
	float: left;
}

.e:hover
{
	transform: scale(1.1);
}

.f
{
	margin-top: 10px;
	margin-left: 10px;
	transition: all 0.5s ease-in-out;
	float: left;
}

.f:hover
{
	transform: scale(1.1);
}

.g
{
	margin-top: 10px;
	margin-left: 10px;
	transition: all 0.5s ease-in-out;
	float: left;
}

.g:hover
{
	transform: scale(1.1);
}

.h
{
	margin-top: 10px;
	margin-left: 10px;
	transition: all 0.5s ease-in-out;
	float: left;
}

.h:hover
{
	transform: scale(1.1);
}

#footer
{
	padding-top: 14px;
	text-align: center;
	color: white;
	width: 1332px;
	height: 50px;
	border-top: solid #F70000;
	border-bottom: solid #F70000;
	border-width: thin;
	clear: both;
	margin-top: 30px;
	background-color: rgba(0, 0, 0, 0.30);
}

.articleone
{
	width: 830px;
	margin-left: 2px;
	height: 90px;
	background-color: black;
	transition: all 0.5s ease-in-out;
	text-align: right;
}

.articleone:hover
{
	background-color: #161616;
}

.articletwo
{
	margin-top: 10px;
	width: 830px;
	margin-left: 2px;
	height: 90px;
	background-color: black;
	transition: all 0.5s ease-in-out;
	text-align: right;
}

.articletwo:hover
{
	background-color: #161616;
}

 

HTML5:

<html>

    <head>

        <meta charset="utf-8" />

        <link href="https://fonts.googleapis.com/css?family=Saira:100" rel="stylesheet">

        <link rel="stylesheet" href="Style.css" />
		
		<title>WIndows Techmania!</title>

    </head>

    <body>

        <div id = "title" style="clear: both;">

			<h1>Windows Techmania.pl</h1>
			
		</div>
		
			<div class = "abc">
			
				<div class="aone">
				
					<a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">Start</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>
			
				</div>
			
				<div class="atwo">
				
					<a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">Produkty</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>
			
				</div>
				
				<div class="athree">
				
					<a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">Blog</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>
			
				</div>
				
				<div class="afour">
				
					<a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">O nas</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>
			
				</div>

				<div class="afive">
						
							<a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">Kontakt</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>
					
				</div>
			
			</div>
		
		<div id = "content">

				<h1>Nasz blog</h1>

				<div class = "articleone">
						<img style="margin-right: 710px;" src="W10Blog.jpg">
						
				<text>Nowy Windows 10 Fall Creators Update
						już 19 paździenika!</text>
						
				</div>

				<div class = "articletwo">
					<img style="margin-right: 710px;" src="W10Blog.jpg">
					Windows 10 z nowym wyglądem
					"Fluent Design"
						
				</div>
		
		</div>

		<div id="something">

			<h1>G A L E R I A</h1>
			
			<br>
			<div class = "a"><img src = "W10.jpg"></div>
			<div class = "b"><img src = "W10.jpg"></div>
			<div class = "c"><img src = "W10.jpg"></div>
			<div class = "d"><img src = "W10.jpg"></div>
			<div class = "e"><img src = "W10.jpg"></div>
			<div class = "f"><img src = "W10.jpg"></div>
			<div class = "g"><img src = "W10.jpg"></div>
			<div class = "h"><img src = "W10.jpg"></div>
			<div style = "clear: both;"></div>
			

		</div>

		<div id = "footer">

			Copyright &copy 2017 Pille Inc.

		</div>

    </body>

</html>

3 odpowiedzi

0 głosów
odpowiedź 10 września 2017 przez Wilczu Mądrala (5,190 p.)

Hej, poprawiłem co nieco efekt końcowy wygląda tak 

https://ibb.co/iUQH1v

Mam nadzieje że o to chodziło :) 

Kod html:

<html>

    <head>

        <meta charset="utf-8" />

        <link href="https://fonts.googleapis.com/css?family=Saira:100" rel="stylesheet">

        <link rel="stylesheet" href="Style.css" />

        <title>WIndows Techmania!</title>


    </head>

    <body>

        <div id = "title" style="clear: both;">

            <h1>Windows Techmania.pl</h1>

        </div>

            <div class = "abc">

                <div class="aone">

                    <a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">Start</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>

                </div>

                <div class="atwo">

                    <a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">Produkty</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>

                </div>

                <div class="athree">

                    <a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">Blog</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>

                </div>

                <div class="afour">

                    <a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">O nas</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>

                </div>

                <div class="afive">

                            <a href = "#" style="color: rgba(0, 0, 0, 0)">-</a><a href = "#" style="text-decoration: none; color: white;">Kontakt</a><a href = "#"  style="color: rgba(0, 0, 0, 0)">-</a>

                </div>

            </div>

        <div id="content">

                <h1>Nasz blog</h1>

                <div class="article-container">

                  <div class="blog-img">
                          <img src="https://img.cda.pl/obr/oryginalne/850ca7d90566b9ed82c60d9d50771230.jpg">
                  </div>

                  <div class="blog-text">
                    Nowy Windows 10 Fall Creators Update
                          już 19 paździenika!
                  </div>
                  <div style="clear: both;"></div>

                </div>

                <div class = "article-container">

                  <div class="blog-img">
                          <img src="https://img.cda.pl/obr/oryginalne/850ca7d90566b9ed82c60d9d50771230.jpg">
                  </div>

                  <div class="blog-text">
                    Nowy Windows 10 Fall Creators Update
                          już 19 paździenika!
                  </div>
                  <div class="float-clear"></div>

                </div>

                <div class = "article-container">

                  <div class="blog-img">
                          <img src="https://img.cda.pl/obr/oryginalne/850ca7d90566b9ed82c60d9d50771230.jpg">
                  </div>

                  <div class="blog-text">
                    Nowy Windows 10 Fall Creators Update
                          już 19 paździenika!
                  </div>
                  <div class="float-clear"></div>

                </div>


        </div>

        <div id="something">

            <h1>G A L E R I A</h1>

            <br>
            <div class = "a"><img src = "W10.jpg"></div>
            <div class = "b"><img src = "W10.jpg"></div>
            <div class = "c"><img src = "W10.jpg"></div>
            <div class = "d"><img src = "W10.jpg"></div>
            <div class = "e"><img src = "W10.jpg"></div>
            <div class = "f"><img src = "W10.jpg"></div>
            <div class = "g"><img src = "W10.jpg"></div>
            <div class = "h"><img src = "W10.jpg"></div>
            <div style = "clear: both;"></div>


        </div>

        <div id = "footer">

            Copyright &copy 2017 Pille Inc.

        </div>

    </body>

</html>

A tutaj kod css

body
{
    font-family: 'Saira', sans-serif;
    background-image: url("background.png");
}

#title
{
    padding-top: 2px;
    padding-left: 34px;
    background-color: rgba(0, 0, 0, 0.30);
    color: #39a5f1;
    width: 385px;
    height: 97px;
    border-bottom: solid #00FF9D;
    border-top: solid #00FF9D;
    border-width: thin;
    margin-bottom: -130px;
}

.abc
{
    padding-left: 74px;
    text-align: center;
    float: left;
    font-size: 25px;
    margin-left: 450px;
    width: 809px;
    height: 99px;
    border-bottom: solid #39a5f1;
    border-top: solid #39a5f1;
    border-width: thin;
    background-color: rgba(0, 0, 0, 0.30);
}

.aone
{
    margin-top: 28px;
    width: 74px;
    transition: all 0.5s ease-in-out;
    float: left;
}

.aone:hover
{
    background-color: #3955f1;
}

.atwo
{
    margin-top: 28px;
    width: 124px;
    transition: all 0.5s ease-in-out;
    float: left;
    margin-left: 55px;
}

.atwo:hover
{
    background-color: #3955f1;
}

.athree
{
    margin-top: 28px;
    width: 71px;
    transition: all 0.5s ease-in-out;
    float: left;
    margin-left: 55px;
}

.athree:hover
{
    background-color: #3955f1;
}

.afour
{
    margin-top: 28px;
    width: 84px;
    transition: all 0.5s ease-in-out;
    float: left;
    margin-left: 55px;
}

.afour:hover
{
    background-color: #3955f1;
}

.afive
{
    margin-top: 28px;
    width: 107px;
    transition: all 0.5s ease-in-out;
    float: left;
    margin-left: 55px;
}

.afive:hover
{
    background-color: #3955f1;
}

#content
{
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: rgba(0, 0, 0, 0.30);
    color: #FFFFFF;
    padding-left: 13px;
    border-top: solid greenyellow;
    border-bottom: solid greenyellow;
    border-width: thin;
    width: 850px;
    float: left;
}

#something
{
    margin-top: 30px;
    text-align: center;
    color: white;
    margin-left: 30px;
    background-color: rgba(0, 0, 0, 0.30);
    width: 440px;
    height: 390px;
    float: left;
    border-top: solid #F7DE00;
    border-bottom: solid #F7DE00;
    border-width: thin;
    margin-bottom: 30px;
}

.a
{
    margin-left: 10px;
    float: left;
    transition: all 0.5s ease-in-out;
}

.a:hover
{
    transform: scale(1.1);
}

.b
{
    margin-left: 10px;
    transition: all 0.5s ease-in-out;
    float: left;
}

.b:hover
{
    transform: scale(1.1);
}

.c
{
    margin-left: 10px;
    transition: all 0.5s ease-in-out;
    float: left;
}

.c:hover
{
    transform: scale(1.1);
}

.d
{
    margin-left: 10px;
    transition: all 0.5s ease-in-out;
    float: left;
}

.d:hover
{
    transform: scale(1.1);
}

.e
{
    margin-top: 10px;
    margin-left: 10px;
    transition: all 0.5s ease-in-out;
    float: left;
}

.e:hover
{
    transform: scale(1.1);
}

.f
{
    margin-top: 10px;
    margin-left: 10px;
    transition: all 0.5s ease-in-out;
    float: left;
}

.f:hover
{
    transform: scale(1.1);
}

.g
{
    margin-top: 10px;
    margin-left: 10px;
    transition: all 0.5s ease-in-out;
    float: left;
}

.g:hover
{
    transform: scale(1.1);
}

.h
{
    margin-top: 10px;
    margin-left: 10px;
    transition: all 0.5s ease-in-out;
    float: left;
}

.h:hover
{
    transform: scale(1.1);
}

#footer
{
    padding-top: 14px;
    text-align: center;
    color: white;
    width: 1332px;
    height: 50px;
    border-top: solid #F70000;
    border-bottom: solid #F70000;
    border-width: thin;
    clear: both;
    margin-top: 30px;
    background-color: rgba(0, 0, 0, 0.30);
}

.article-container
{
    width: 830px;
    background-color: black;
    transition: all 0.5s ease-in-out;
    margin-bottom: 20px;
}

.blog-text
{
  width: 700px;
  flaot: left;
  text-align: left;
}

.blog-img
{
  width: 140px;
  float: left;
}

.blog-img > img
{
  width: 100%;
}

.float-clear
{
  clear: both;
}

.articleone:hover
{
    background-color: #161616;
}

.articletwo
{
    margin-top: 10px;
    width: 830px;
    margin-left: 2px;
    height: 90px;
    background-color: black;
    transition: all 0.5s ease-in-out;
    text-align: right;
}

.articletwo:hover
{
    background-color: #161616;
}

 

PS Nie ograniczaj szerokości diva tak jak to zrobiłeś w div o id content. Ustawiłeś tam szerokość na bodajże 140px nie musisz ustawiać szerokości diva bo on sam sobie ustawi szerokość w zależności ile treści będzie w tym divie.

W stopce musisz zakończyć znacznik &copy;

czyli stopka powinna wyglądać tak

        <div id="footer">

            Copyright &copy; 2017 Pille Inc.

        </div>

I proszę poczytaj troszkę o dziedziczeniu w css :) 

A i jeszcze jedno według mnie strona o wiele lepiej by wyglądała gdyby była wyśrodkowana ale to tylko moja opinia :)

Powodzenia ze stroną

 

 komentarz 18 września 2017 przez PeterPkp123 Nowicjusz (160 p.)
Dziękuję, mam już!
0 głosów
odpowiedź 18 września 2017 przez PeterPkp123 Nowicjusz (160 p.)
Dzięki wszystkim za pomoc!
–1 głos
odpowiedź 10 września 2017 przez plucins Stary wyjadacz (11,110 p.)
Masz może jakiś URL, gdzie ta strona jest dostępna ?

Podobne pytania

0 głosów
1 odpowiedź 105 wizyt
Tekst obok tabelki
pytanie zadane 14 stycznia 2018 w HTML i CSS przez Zackerrr Początkujący (450 p.)
0 głosów
3 odpowiedzi 575 wizyt
Tekst obok menu HTML/CSS
pytanie zadane 2 stycznia 2018 w HTML i CSS przez Adam Arnold Początkujący (460 p.)
0 głosów
1 odpowiedź 1,203 wizyt
Tekst obok zdjęcia.
pytanie zadane 4 marca 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

92,556 zapytań

141,404 odpowiedzi

319,563 komentarzy

61,942 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...