zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Übungswebseite verbessern und responsive machen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #21 (permalink)  
Alt 15.07.2018, 11:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

[QUOTE=basti1012;552561]Das mit den 3 gleichgroßen Video Link verstehe ich nicht ganz.

Das mit dem Videolink war so gemeint: alle drei Elemente sollten gleich hoch sein, und die Abstände dazwischen gleichmässig!

Screenshot als Anhang dabei
Angehängte Grafiken
Dateityp: jpg Ohne Titel.jpg (74,1 KB, 3x aufgerufen)

Geändert von sabrina79 (15.07.2018 um 11:06 Uhr)
Mit Zitat antworten
Sponsored Links
  #22 (permalink)  
Alt 15.07.2018, 11:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

ZITAT: Wenn ich noch näher hinschauen würde, würde ich bestimmt noch mehr 'Kleinigkeiten' entdecken, die zu verbessern wären - aber du bist wohl auf einem guten Weg und dein Übungsprojekt macht einen guten Eindruck!



Vielen lieben Dank für die ganzen tollen Tips. Werde mich gleich ans umsetzen machen.
Und zwecks Kleinigkeiten: Gerade die Kleinigkeiten machen eine gute ( perfekte) Seite aus, welche ich gerne erreichen möchte ( scheitert nur leider an momentaner Unwissenheit! Möchte das alles aber gerne lernen und danke nochmal vielmals für die Hilfen dafür )

Geändert von sabrina79 (15.07.2018 um 11:08 Uhr)
Mit Zitat antworten
Sponsored Links
  #23 (permalink)  
Alt 15.07.2018, 12:08
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

[QUOTE=sabrina79;552563]
Zitat:
Zitat von basti1012 Beitrag anzeigen
Das mit den 3 gleichgroßen Video Link verstehe ich nicht ganz.

Das mit dem Videolink war so gemeint: alle drei Elemente sollten gleich hoch sein, und die Abstände dazwischen gleichmässig!

Screenshot als Anhang dabei
Uuppss... da hast du dir was vorgenommen - die Quadratur des Kreises.
Du solltest dich von dem Gedanken lösen, dass du vor deinem Bildschirm sitzt und das alles irgendwie so hinfummelst, dass es irgendwie passt... ein bisschen Margin hier und ein bisschen Padding da ... und schon sieht es so aus, wie du es gerne hättest! Hehe... aber auch nur auf deinem Bildschirm. Für die restlichen 90% der Leute, die deine Seite besuchen passt aber genau das nicht.
In deinem speziellen Fall kommen da auch noch ein paar ganz ausschlaggebende Komplikationen dazu:
Das Video läuft in einem IFrame und hat vorgegebene Maße.
HTML-Code:
<iframe src="https://player.vimeo.com/video/75396408" width="660" height="450" frameborder="0" class="link"></iframe>
Alleine das ist schon ein Killer. Wie soll das funktionieren, wenn jemand mit seinem SmartPhone vorbei schaut und 'nur' zB 380px Bildschirmbreite hat.
Dazu kommt dann noch, dass dein rechter Container Text beinhaltet! Die Größe dieses Containers richtet sich nach dessen Inhalt und Text hat nun mal die Eigenart, dass er Zeilenumbrüche erzeugt, wenn die Breite abnimmt - die Höhe wächst also bei abnehmender Breite.
Und dann hast du auch noch ein Bild dazwischen eingefügt... hmmm... auch wieder vorgegebene Proportionen.
Du wirst da Kompromisse machen müssen und dir vor allem Gedanken dazu machen müssen, wie sich denn deine Seite verhalten soll, wenn die Bildschirmbreite sich ändert (responsive).
Mache dazu mal einen Plan, dann kann man dir ggf. weiter helfen.
Mit Zitat antworten
  #24 (permalink)  
Alt 15.07.2018, 12:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

[QUOTE=Sailor56;552565]
Zitat:
Zitat von sabrina79 Beitrag anzeigen
Uuppss... da hast du dir was vorgenommen - die Quadratur des Kreises.
Du solltest dich von dem Gedanken lösen, dass du vor deinem Bildschirm sitzt und das alles irgendwie so hinfummelst, dass es irgendwie passt... ein bisschen Margin hier und ein bisschen Padding da ... und schon sieht es so aus, wie du es gerne hättest! Hehe... aber auch nur auf deinem Bildschirm. Für die restlichen 90% der Leute, die deine Seite besuchen passt aber genau das nicht.
In deinem speziellen Fall kommen da auch noch ein paar ganz ausschlaggebende Komplikationen dazu:
Das Video läuft in einem IFrame und hat vorgegebene Maße.
HTML-Code:
<iframe src="https://player.vimeo.com/video/75396408" width="660" height="450" frameborder="0" class="link"></iframe>
Alleine das ist schon ein Killer. Wie soll das funktionieren, wenn jemand mit seinem SmartPhone vorbei schaut und 'nur' zB 380px Bildschirmbreite hat.
Dazu kommt dann noch, dass dein rechter Container Text beinhaltet! Die Größe dieses Containers richtet sich nach dessen Inhalt und Text hat nun mal die Eigenart, dass er Zeilenumbrüche erzeugt, wenn die Breite abnimmt - die Höhe wächst also bei abnehmender Breite.
Und dann hast du auch noch ein Bild dazwischen eingefügt... hmmm... auch wieder vorgegebene Proportionen.
Du wirst da Kompromisse machen müssen und dir vor allem Gedanken dazu machen müssen, wie sich denn deine Seite verhalten soll, wenn die Bildschirmbreite sich ändert (responsive).
Mache dazu mal einen Plan, dann kann man dir ggf. weiter helfen.

Fand halt rein das Layout schön und habe nicht die Problematik die dahinter steckt bedacht.
Der Videolink muss von mir aus keine feste breite haben ( war so vorgegeben) , falls das weiterhilft.

meinst ich sollte den videopink einzeln in der Spalte lassen?!
Mit Zitat antworten
  #25 (permalink)  
Alt 15.07.2018, 13:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
meinst ich sollte den videopink einzeln in der Spalte lassen?!
Das ist mit Sicherheit die bessere Idee.... das Video zentriert (auch zunächst mit den festen Größen), dann darunter dein Trenner und darunter dann dein Text.
Wenn das Video dann an die 'Ränder' stößt, muss man es eben in einer @media runterskalieren. Das sollte allerdings kein großes Problem sein.
Mit Zitat antworten
  #26 (permalink)  
Alt 15.07.2018, 14:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
Das ist mit Sicherheit die bessere Idee.... das Video zentriert (auch zunächst mit den festen Größen), dann darunter dein Trenner und darunter dann dein Text.
Wenn das Video dann an die 'Ränder' stößt, muss man es eben in einer @media runterskalieren. Das sollte allerdings kein großes Problem sein.
wollte es jetzt so machen, dass der Videolink allein steht,
und darunter zwei Textblöcke und dazwischen das `divider`bild.
das divider Bild nimmt aber ( in der Breite) immer den gleichen Raum ein wie die Textblöcke!
werde langsam immer mehr verwirrt ... was ist denn da falsch?
Angehängte Grafiken
Dateityp: jpg Ohne Titel.jpg (152,5 KB, 2x aufgerufen)
Mit Zitat antworten
  #27 (permalink)  
Alt 15.07.2018, 14:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

... und die dishes ID hat es während der letzten Änderungen auch irgendwie zerschossen

ist bestimmt nur ein kleiner Befehl mit grosser Wirkung, aber komme da nicht drauf! und will jetzt nicht alles wieder mehr durcheinander machen!
Angehängte Grafiken
Dateityp: jpg dishes.jpg (135,7 KB, 2x aufgerufen)
Mit Zitat antworten
  #28 (permalink)  
Alt 15.07.2018, 14:55
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Das ist mit Sicherheit nur eine Kleinigkeit... hast du dieses 'box-sizing' eingebaut?
Dann prüfe mal, ob du bei den width-Angaben zu deinen Elementen dieses auch berücksichtigt hast... 4 Elemente in einer Reihe = 25%... 3 Elemente ~33%....
2 Elemente 50%.
Das da mit den Breitenangaben etwas nicht stimmt, sieht man ja an dem Problem mit dem Trenner. mach da mal links und rechts 40% und das Bild dann 10%.
Sonst musst du nochmal den Code posten (nutze dann bitte diese 'HTML Code' Einfügung).
Kann ja auch sein, dass du im CSS deine Selektoren etwas gezielter ansprechen musst.
Also zB
#dishes .forthpic
statt nur
.forthpic
ist aber jetzt nur zur Veranschaulichung als Beispiel, ist aber an den Stellen, wo es komisch aussieht überprüfenswert, damit sich de CSS Angaben nicht gegenseitig aufheben.
Mit Zitat antworten
  #29 (permalink)  
Alt 15.07.2018, 20:10
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.05.2018
Beiträge: 45
sabrina79 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sailor56 Beitrag anzeigen
Das ist mit Sicherheit nur eine Kleinigkeit... hast du dieses 'box-sizing' eingebaut?
Dann prüfe mal, ob du bei den width-Angaben zu deinen Elementen dieses auch berücksichtigt hast... 4 Elemente in einer Reihe = 25%... 3 Elemente ~33%....
2 Elemente 50%.
Das da mit den Breitenangaben etwas nicht stimmt, sieht man ja an dem Problem mit dem Trenner. mach da mal links und rechts 40% und das Bild dann 10%.
Sonst musst du nochmal den Code posten (nutze dann bitte diese 'HTML Code' Einfügung).
Kann ja auch sein, dass du im CSS deine Selektoren etwas gezielter ansprechen musst.
Also zB
#dishes .forthpic
statt nur
.forthpic
ist aber jetzt nur zur Veranschaulichung als Beispiel, ist aber an den Stellen, wo es komisch aussieht überprüfenswert, damit sich de CSS Angaben nicht gegenseitig aufheben.


Hallo da bin ich wieder, habe das mit dem videolink glaube ich ganz gut hinbekommen und die width angaben auch.

Allerdings komme ich bei dem Bereich row3, third_pic nicht ans ziel.
habe zwei screenshots angefügt. Die Ausrichtung oder abstände in dem Bereich wollen einfach nicht passen!

Hier auch nochmal der aktuelle Code

HTML-Code:
<!DOCTYPE html> 
<html lang="en-US">

<head>    
<meta charset="utf-8">    
<meta name="viewport" content="width=device-width,initial-scale=1">    
<title>Home | The Greek Restaurant</title>    
<meta name="description" content="great food, location and bar">    
<link rel="stylesheet" href="styles/styles.css">     
<link rel="shortcut icon" href="images/favicon.ico">
</head>


 <!-- header -->
<body id="up">
	<div class="wrapper">
 
<header id="frame">
	<a href="index.html"><img src="images/tgr_logo.png" alt="The Greek Restaurant - Logo"></a>

	<nav id="navigation">   <!-- navigation --> 
	<ul>        
	<li><a href="#">about us</a></li>        
	<li><a href="#">events</a></li>        
	<li><a href="#">gallery</a></li>   
	<li><a href="#">reservation</a></li> 
	<li><a href="#">menu</a></li> 
	<li><a href="#">contact</a></li>    
	</ul>    
	<hr>
	</nav> 
</header>
 

<!--main content -->
 <section id="content">
	<article class="teaser">
		<img src="images/teaser_header.png" alt="bar">
	</article>
	<article class="button">
		<a href="call.html" class="button">call: 548 788 000 742 / book a table</a>
	</article>
	<article class="main">
		<div class="row">
			<div class="column third"><a href="menu.html"><img src="images/button_menu.png" alt="menu"></a></div>
			<div class="column third"><a href="gallery.html"><img src="images/button_gallery.png" alt="gallery"></a></div>
			<div class="column third"><a href="opening.html"><img src="images/button_opening.png" alt="opening"></a></div>
		</div>
	</article>

<hr>

	<article class="main">
		<div class="row">
			<div class="column third">
			<h3>Creeping Likeness Him Form Give She'd Light</h3><br>
			<p>Multiply is multiply Likeness gathered.<br> The fowl days given called, first gathering blessed his good upon abundantly made own forth third their was bearing. After from upon tree day waters. Which divide air won't there very earth creepeth over morning kind to over tree beast whose blessed winged is forth blessed the one.<br>
            <a href="#" class="readmore"> read more...</a></div>
			<div class="column third">
			<h3>Creeping Likeness Him Form Give She'd Light</h3><br>
			<p>Multiply is multiply Likeness gathered.<br> The fowl days given called, first gathering blessed his good upon abundantly made own forth third their was bearing. After from upon tree day waters. Which divide air won't there very earth creepeth over morning kind to over tree beast whose blessed winged is forth blessed the one. <br>
            <a href="#" class="readmore"> read more...</a></div>
			<div class="column third">
			<h3>Creeping Likeness Him Form Give She'd Light</h3><br>
			<p>Multiply is multiply Likeness gathered.<br> The fowl days given called, first gathering blessed his good upon abundantly made own forth third their was bearing. After from upon tree day waters. Which divide air won't there very earth creepeth over morning kind to over tree beast whose blessed winged is forth blessed the one.<br>
            <a href="#" class="readmore"> read more...</a></div>
		</div>
	</article>
	<article class="main">
		<div class="row3">
			<div class="third_pic">
   			<a href="team.html">
      		<img src="images/team.png" alt="team"><br>
      		<p class="column third_subline">our team</p>
   			</a>
			</div>
			<div class="third_pic">
   			<a href="wine.html">
      		<img src="images/wine.png" alt="wine"><br>
      		<p class="column third_subline">wine specials</p>
   			</a>
			</div>
			<div class="third_pic">
   			<a href="lifestyle.html">
      		<img src="images/lifestyle.png" alt="lifestyle"><br>
      		<p class="column third_subline">lifestyle</p>
   			</a>
			</div>
		</div>
	</article>


<!--about us -->
	<article class="main">
		<div class="full">Welcome to THE GREEK RESTAURANT - NEW YORK</div>
	</article>
	<article class="main">
		<div class="row4">
			<div class="column fourth">
			<img src="images/4row_1.png" alt="tables">
			</div>
			<div class="column fourth">
			<h3>Creeping Likeness Him Form Give She'd Light</h3><br>
			<p>Multiply is multiply Likeness gathered.<br> The fowl days given called, first gathering blessed his good upon abundantly made own forth third their was bearing. Which divide air won't there very earth creepeth over morning kind to over tree beast whose blessed winged is forth blessed the one. 
Divided bring saw saying. <br> Man shall likeness creeping it and make meat without years!Light seasons gathering.</p>
			</div>
			<div class="column fourth">
			<h3>Subdue Whales Our Third Let Great</h3><br>
			<p>Subdue sea years their green you'll won't. Fifth meat creepeth evening air made fourth all second you'll he behold creature moving heaven the open.<br> Light seasons gathering.<br> Fish which sea whose saying earth fourth is moveth fish. Rule. Open. <br> Him day winged thing days female of night earth deep it that third given evening for good there it creature that land which and winged.</p>
            </div>
			<div class="column fourth">
			<img src="images/4row_2.png" alt="tables">
			</div>
		</div>
	</article>
</section>


<!--fullmenu -->
<section id="dishes">
	<article class="maindishes">
		<div class="row">
			<div class="column fourthpic">
			<img src="images/seafood.jpg" alt="seafood">
			<h2>seafood</h2>
			</div>
			<div class="column fourthpic">
			<img src="images/appetizer.jpg" alt="appetizer">
			<h2>appetizer</h2>
			</div>
			<div class="column fourthpic">
			<img src="images/salad.jpg" alt="salad">
			<h2>salad</h2>
			</div>
			<div class="column fourthpic">
			<img src="images/meat-dishes.jpg" alt="meat dishes">
			<h2>meat dishes</h2>
			</div>
			<div class="column fourthpic">
			<img src="images/dessert.jpg" alt="dessert">
			<h2>dessert</h2>
			</div>
			<div class="column fourthpic">
			<img src="images/grilled-specials.jpg" alt="grill-specials">
			<h2>grill specials</h2>
			</div>
			<div class="column fourthpic">
			<img src="images/vegetarian.jpg" alt="vegetarian">
			<h2>vegetarian</h2>
			</div>
			<div class="column fourthpic">
			<img src="images/traditional.jpg" alt="traditional">
			<h2>traditional</h2>
			</div>
		</div>
	<div class="column fullmenu">check out the whole menu</div>
</article>
</section>

<!-- videolink -->
<section id="video"> 
	<article class="videolink">
		<div class="row">
        	<div class="vid_videolink">
			<iframe src="https://player.vimeo.com/video/75396408" width="660" height="450" frameborder="0" class="link"></iframe>
        	</div>
    	</div>
  	</article>              
            
 	<article class="videotext"> 
    	<div class="row"> 
    		<div class="text_videolink">
			<h4>Subdue Whales Our Third Let Great</h4> <br>
			<p>Subdue sea years their green you'll won't. Fifth meat creepeth evening air made fourth all second you'll he behold creature moving heaven the open.<br> Two i yielding upon behold give for fly after one form. <br> Fish which sea whose saying earth fourth is moveth fish. Rule. Open.<br> Him day winged thing days female of night earth deep it that male also female whose very and bring gathered greater, years let dominion fruitful, given moving of. Subdue Whales Our Third Let Great. Fish which sea whose saying earth fourth is moveth fish. Rule. Open.</p>
			</div>         
            <img src="images/maeander_straight_white.jpg" alt="divider">
			<div class="text_videolink">
			<h4>Subdue Whales Our Third Let Great</h4> <br>
			<p>Subdue sea years their green you'll won't. Fifth meat creepeth evening air made fourth all second you'll he behold creature moving heaven the open.<br> Two i yielding upon behold give for fly after one form. <br> Fish which sea whose saying earth fourth is moveth fish. Rule. Open.<br> Him day winged thing days female of night earth deep it that male also female whose very and bring gathered greater, years let dominion fruitful, given moving of. Subdue Whales Our Third Let Great. Fish which sea whose saying earth fourth is moveth fish. Rule. Open.</p>
			</div>
		</div>            
	</article>
</section>

 
<!-- footer -->
<footer id="site-footer">
	<article class="socialmedia">
	<a href="whatsapp.com" class="whatsapp"><img src="images/whatsapp.png" alt="whatsapp"></a>
	<a href="google-plus.com" class="google-plus"><img src="images/google-plus.png" alt="google-plus"></a>
	<a href="youtube.com" class="youtube"><img src="images/youtube.png" alt="youtube"></a>
	<a href="instagram.com" class="instagram"><img src="images/instagram.png" alt="instagram"></a>
	<a href="twitter.com" class="twitter"><img src="images/twitter.png" alt="twitter"></a>
	<a href="facebook.com" class="facebook"><img src="images/social-media.png" alt="facebook"></a>
	<a href="share.com" class="share"><img src="images/share.png" alt="share"></a>
	</article>
    
    <article class="up">
   	<a href="#up">
    <img src="images/up.png" alt="site-up">
   	</a>
	</article>
    
	<article class="copyright">    
	<img src="images/tgr.png" alt="Logo_TGR">
	<h4>433 Sandwich Street, NY 43825 - copyright TGR. All rights reserved</h4>
	</article>
</footer>    
 
</div> <!-- wrapper end-->
 
</body>

@charset "utf-8";

/*
* CSS-Design
* Online-Schule für Gestaltung: Webdesign-Kurs
*/


/* Reset * * * * * * * * */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html{ font-size: 100%; }

img{
max-width: 100%;
margin: 0 auto;
}

/* Layout * * * * * * * * */

body{
margin: 0 auto;
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
background: #111;
display: flex;
flex-flow: row wrap;
}

.wrapper{
margin: 0 auto;
overflow: hidden;
}

#frame{
width: 100%;
text-align: center;
}

.main{
width: 100%;
margin: 0px auto;
padding-top: 30px;
}

#content{
width: 80%;
margin: 0 auto;
}

#dishes{
width: 80%;
margin: 0px auto;
}

.maindishes{
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 20px;
align-self: center;
}

#video{
width: 100%;
margin: 0 auto;
padding-top: 150px;
}

.socialmedia{
width: 100%;
display: flex;
margin: 0 auto;
padding-top: 150px;
padding-bottom: 150px;
justify-content: center;
}

#footer{
width: 80%;
display: flex;
margin: 0 auto;
background: #000;
}

.socialmedia >a{
padding:20px;
}


.up{
width: 100%;
text-align: center;
}

hr{
background-color: #fff;
margin: 0 auto;
margin-top: 50px;
height: 2px;
}

/* Navigation * * * * * * * * */

#navigation{
margin: 100px auto 120px auto;
text-align: center;
font-size: 1.3rem;
}

#navigation ul li{
display: inline;
}

#navigation a{
color: #fff;
text-decoration: none;
padding: 7px 40px;
text-transform: uppercase;
letter-spacing: 1px;
}


#navigation a:hover{
color: #444;
}




/* buttons * * * * * * * * */

.button{
background: #444;
padding: 10px 50px;
text-transform: uppercase;
text-align: center;
margin: 0 auto;
margin-top: 30px;
color: #fff;
border-radius: 20px;
text-decoration: none;
font-size: 1.5rem;
}

.button a:hover{
color: #000;
font-weight:800;
}


/* row * * * * * * * * */

.column {
padding: 20px;
}

.row{
display: flex;
justify-content:space-evenly;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
}

.row3{
display: flex;
margin: 0 auto;
justify-content:space-around;
align-self: center;
flex-wrap: wrap;
width: 100%;
}

.row4{
display: flex;
align-content: space-evenly;
width: 100%;
padding-bottom: 120px;
}

.column:first-child{
margin-left: 0;
}

.full {
width: 60%;
margin: 0 auto;
background: #fff;
border-radius: 20px;
padding: 20px;
text-align: center;
font-weight: 800;
color: #444;
text-decoration: none;
font-size: 1.5rem;
}


.third {
padding-top: 100px;
padding-bottom: 100px;
width: 33%;
}

.fourth {
width: 25%;
color: #fff;
padding-top: 30px;
}




/* Images * * * * * * * * */

.third_pic{
width: 33%;
justify-content: center;
}

.column.fourthpic {
width: 25%;
min-width: 200px;
}





/* Typography * * * * * * * * */

p{
text-align: left;
color: #fff;
}

h2{
text-transform: uppercase;
text-align: left;
color: #000;
}

h3{
text-align: left;
color: #fff;
}

h4{
font-size: 1.3rem;
color: #fff;
}

.readmore{
text-decoration:none;
color: #666;
font-style:italic;
}

.readmore a:hover{
color: #fff;
}



.third_subline{
text-decoration: none;
padding-bottom: 200px;
text-align:center;
text-transform: uppercase;
color: #fff;
font-size: 1.5rem;
}

.third_subline a:hover{
text-decoration: none;
color: #444;
}

.fullmenu {
width: 50%;
background: #444;
padding: 10px 20px 10px 20px;
border-radius: 20px;
margin: 30px 0px 20px 20px;
font-weight: 800;
color: #fff;
text-decoration: none;
font-size: 1.5rem;
text-transform: uppercase;
}

.videotext{
width: 80%;
margin: 0 auto;
}

.text_videolink{
width: 40%;
padding: 20px;
border-radius: 20px;
background: #666;
color: #fff;
}


.copyright{
width: 100%;
background: #000;
color: #fff;
padding: 50px;
text-align: center;
margin-top: 150px;
}



/* Media Queries * * * * * * * * */

@media only screen and (min-width: 980px) and (max-width: 1279px) {

}


@media only screen and (min-width: 760px) and (max-width: 979px) {

}


@media only screen and (max-width: 759px) {

}
Angehängte Grafiken
Dateityp: jpg Ohne Titel1.jpg (139,2 KB, 1x aufgerufen)
Dateityp: jpg Ohne Titel.jpg (79,1 KB, 1x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #30 (permalink)  
Alt 15.07.2018, 20:58
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

Kann das leider ohne die Bilder nicht wirklich testen. Es sieht aber so aus, als wären die <img> nicht zentriert.
Teste mal folgendes:
HTML-Code:
.row3 a {
  text-align: center;
}
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
responsive Webseite runner CSS 4 14.09.2015 22:45
Responsive Design funktioniert nur halbwegs apattoo CSS 3 08.07.2015 11:13
Neuling in Responsive Design DerPrakikant CSS 1 16.02.2015 10:23
Kundeninteresse an Responsive Layout heiko_rs Offtopic 18 24.05.2013 14:37
Suche Responsive CSS Imageslideshow Madmaxx89 CSS 3 29.01.2013 14:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:47 Uhr.