I've got a simple page with a header element consisting of a logo image within an anchor tag nested in a h1 element and a nav element with 4 links. Below that I've got two elements each holding an image and text. I'm wondering why my header breaks apart when I resize the browser window, and why the text is not wrap around their respect images and landing to the right of them. I've also noticed that when I hover passed the logo there's a slight area where it is still a link where it shouldn't be. I'd really appreciate any assistance here, as I'm looking to understand what's happening under the hood with the css.
http://s27.postimg.org/7eyff3ivn/header_break1.png
http://s28.postimg.org/fwg9lohjh/header_break2.png
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Acme</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<header>
<h1><img src="images/logo.png" alt="Respond"></h1>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<section class="first">
<h2>Image 1</h2>
<figure>
<img src="images/featured.png" alt="Image 1" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam<br>
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<section class="second">
<h2>Image 2</h2>
<figure>
<img src="images/featured.png" alt="Image 2" />
</figure>
<p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam
melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br>
autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br>
mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br>
libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br>
at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>
</section>
<footer>
<p id="copyright">© 2014 ACME</p>
</footer>
</body>
</html>
CSS
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 16px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
body {
font-family: Helvetica Neue, Helvetica, Arial;
background: white;
color: #555;
}
header {
width: 100%;
overflow: auto;
border-bottom: 1px solid black;
}
/* Logo H1 */
header h1 {
float: left;
}
header h1 a {
display: block;
text-decoration: none;
margin-top: .5em;
margin-left: 5.5em;
width: 25%;
}
/* Navigation*/
nav {
width: 75%;
overflow: auto;
}
ul {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 20em;
}
ul li {
float: left;
}
ul li a {
display: block;
text-decoration: none;
margin: 5px;
margin-top: 1.5em;
padding: 2px;
font-size: 1.2em;
}
ul li a:hover {
border-bottom: 1px solid #6FC36E;
}
/* Content*/
section {
text-align: center;
margin: 0.625em auto;
overflow: auto;
}
section h2 {
margin-top: 1em;
margin-bottom: 1em;
}
section img {
max-width: 100%;
}
.first {
width: 45%;
float: left;
margin-left: 2%;
}
.first figure {
width: 75%;
}
.second {
width: 45%;
float: left;
margin-left: 2%;
}
.second figure {
width: 75%;
}
/* Footer*/
footer {
clear: both;
text-align: center;
}
This answer only addresses the problems you are having with your navigation.
I would remove the following properties from ul in your css.
float: right;
margin-right: 20em;
You don't need to float the menu to the right and the margin decreases the available space for your menu. The 75% width you set in your CSS should do enough to constrain your menu size.
The only wrapping of your nav that will occur is when the width of nav is less than the width of the elements in your menu. If you want to prevent this you can enlarge the width of the nav or take a different approach.
Hope this helps.
Related
I'm trying to achieve the image-popup-on-hover-over-text similar to Wikipedia. The CSS is working fine except when viewed on a mobile device. Since the popup text can be on the far right or left (depending on the mobile device's screen width), the popup can exceed the width of the screen resulting in the size of the div exceeding the width of the rest of the page.
I've tried positioning the div using the commented out portions of the CSS. If the text is on the far right or left, it pushes the page wider.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height: 1.2;
font-size: 12px;
font-size: 1.0rem;
}
html { font-size: 90%; }
body {
background-color: black;
box-sizing: border-box;
}
img {
width: auto ;
max-width: 100% ;
height: auto;
margin: 0 auto;
}
.top-page {
width: 90%;
position: relative;
top: 0px;
margin: 0 auto;
background: #fff;
}
.flex-container {
display: flex;
flex-wrap: wrap;
margin: 10px 10px;
/*
flex-flow: row;
align-items: center;
justify-content: center;
*/
}
.popup_on_mouseover {/* - parent div - style for keyword */
position: relative;
display: inline-block;
border-bottom: thin dotted;
background: #ffffb3;
font-size: 1.2rem;
font-weight: bold;
}
.popup_on_mouseover:hover {
text-decoration: none;
background: #ffff00;
z-index: 66;
}
.popup_on_mouseover div {
position: absolute;
transform: translateX(-50%);
/*
left: 50%;
left: calc(50vw - 150px);
transform: translateX(-50%);
transform: translateX(50%) translateX(-150px); /* nested */
*/
top: 40px;
visibility: hidden;
width: 300px;
height: 280px;
background-color: rgba(0,0,0,0.85);
text-align: center;
padding: 15px 5px 5px 5px;
z-index:66;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 24px 30px -4px rgba(175,175,175,0.87);
box-shadow: 0px 24px 30px -4px rgba(175,175,175,0.87);
}
.popup_on_mouseover:hover div {
visibility: visible;
}
.hold-text {
padding-right: 20px;
padding-left: 20px;
padding-top: 0px;
padding-bottom: 10px;
text-align:left;
}
img.resizeImg280x210 {
display: block;
width:280px;
max-height:210px;
margin-left: auto;
margin-right: auto;
}
.plainbrown12 {font-size: 1.2rem; color: #59493d }
.white12 {font-size: 1.2rem; color: #FFFFFF }
</style>
</head>
<body>
<div class="top-page">
<div class="flex-container">
<div class="hold-text plainbrown12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
<div class="popup_on_mouseover">currency
<div>
<img src="https://i.stack.imgur.com/mgV0R.png" class="resizeImg280x210">
<br>
<span class="white12">currency</span>
</div>
</div>
, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
<div class="popup_on_mouseover">dude
<div>
<img src="https://i.stack.imgur.com/SUW9T.jpg" width="280" height="210">
<br>
<span class="white12">dude</span>
</div>
</div>
. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
<div class="popup_on_mouseover">dice
<div>
<img src="https://i.stack.imgur.com/DOCT3.png" width="280" height="210">
<br>
<span class="white12">dice</span>
</div>
</div>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</body>
</html>
Best case scenario would be to calculate the screen width and show the popup image just below the text, and for any screen width which puts the popup div off screen, move the div to it's on the left/right side of the parent div.
popup text is in the center of the page, no issues
popup text on left margin, image is off the page
From what I'm seeing, the text which triggers the pop-up can be basically anywhere on the line - at the beginning, middle or end. In this case, as the popup is position in relation to this, you cannot use CSS to adapt to that - you need JS.
Basically it would be along the lines of:
- mouseenter/mouseleave events to show/hide
- get the position of the 'hover' target
- check if it is near the side of the screen (half its size + the size of the pop-up itself)
- if it is too close, (and so it would not contain the whole image), make adjustments to it's position.
Sorry if this question was already asked but I looked at all answers and none helped solving my issue.
I'm new to CSS and I'm trying to move the sidebar to the side but nothing worked.
Could anyone help please?
I tried changing the float:left and float:right but it didn't help. I also tried changing or deleting margins and paddings but in vain.
Here is my code:
HTML:
/*
Theme Name: HTML5;
Date: Feb 2018;
Description: Learn Basic HTML;
Version: 0.1;
Author: MWQ;
Author URL: www.example.com;
*/
body{
background-image: url('../img/bodybg.png');
color: #000305;
font-size: 90%;
font-family: 'Arial', 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
a{
text-decoration: none;
}
a:link, a:visited{color:#e74c3c;}
a:hover, a:active{color:#f58233;}
.body{
margin: 10px auto;
width: 70%;
clear: both;
}
/* ------- Main Header --------*/
.mainheader img{
width: 100%
}
.mainheader nav{
background-color: #e74c3c;
height: 40px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.mainheader nav ul{
text-align: center;
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li{
display: inline;
}
.mainheader a:link, .mainheader a:visited{
color: white;
padding: 10px 40px;
display: inline-block;
}
.mainheader a:hover, .mainheader a:active{
color: white;
background-color: #f58233;
text-shadow: 1px 1px #000;
}
/* ------- Main Content --------*/
.mainContent{
width: 70%;
float: left;
}
.top-content{
background-color: #fff;
padding: 3%;
margin-top: 3%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.post-info{
font-size: 90%;
color: #999;
font-style: italic;
margin-top: -20px;
}
.post-content{
display: inline;
}
.theSidebar{
width: 22%;
margin: 2% 0 0 2%;
float: left;
padding: 2%;
background-color: #fff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
<!DOCTYPE html>
<html>
<!----------HEAD--------->
<head>
<title>HTML5 CSS3, & Responsive!</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!----------Body--------->
<body class="body">
<header class="mainheader">
<img src="img/header.jpg"/>
<nav><ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul></nav>
</header>
<div class="mainContent"></div>
<section class="top-content">
<header></header>
<h2>My Intro Text</h2>
<footer>
<p class="post-info">Written By: MWQ</p>
</footer>
<article>
<p>
Eram admodum occaecat. Esse
laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit
doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat
amet ne proident firmissimum te se quo anim nescius id quorum appellat an
laborum.
</p>
</article>
</section>
<section class="top-content">
<header></header>
<h2>Video Tutorial</h2>
<footer>
<p class="post-info">Written By: MWQ</p>
</footer>
<article>
<p>
Eram admodum occaecat. Esse
laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit
doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat
amet ne proident firmissimum te se quo anim nescius id quorum appellat an
laborum.
</p>
</article>
</section>
<!----------Side Bar--------->
<aside>
<article class="theSidebar">
<h1> First Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<aside>
<article class="theSidebar">
<h1> Second Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<aside>
<article class="theSidebar">
<h1> Third Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<!----------Footer--------->
<footer><p>Copy Rights</p></footer>
</body>
</html>
Hre goes the code:
/*
Theme Name: HTML5;
Date: Feb 2018;
Description: Learn Basic HTML;
Version: 0.1;
Author: MWQ;
Author URL: www.example.com;
*/
body{
background-image: url('../img/bodybg.png');
color: #000305;
font-size: 90%;
font-family: 'Arial', 'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
a{
text-decoration: none;
}
a:link, a:visited{color:#e74c3c;}
a:hover, a:active{color:#f58233;}
.body{
margin: 10px auto;
width: 70%;
clear: both;
}
/* ------- Main Header --------*/
.mainheader img{
width: 100%
}
.mainheader nav{
background-color: #e74c3c;
height: 40px;
border-radius: 5px;
z-index: 999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.mainheader nav ul{
text-align: center;
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li{
display: inline;
}
.mainheader a:link, .mainheader a:visited{
color: white;
padding: 10px 40px;
display: inline-block;
}
.mainheader a:hover, .mainheader a:active{
color: white;
background-color: #f58233;
text-shadow: 1px 1px #000;
}
/* ------- Main Content --------*/
.mainContent{
width: 70%;
position: absolute;
right: 1px;
}
.top-content{
background-color: #fff;
padding: 3%;
margin-top: 3%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.post-info{
font-size: 90%;
color: #999;
font-style: italic;
margin-top: -20px;
}
.post-content{
display: inline;
}
.theSidebar{
width: 22%;
margin: 2% 0 0 2%;
float: left;
padding: 2%;
background-color: #fff;
border-radius: 5px;
position: absolute;
top: 20px;
left: 20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
<!DOCTYPE html>
<html>
<!----------HEAD--------->
<head>
<title>HTML5 CSS3, & Responsive!</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<!----------Body--------->
<body class="body">
<header class="mainheader">
<img src="img/header.jpg"/>
<nav><ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul></nav>
</header>
<div class="mainContent">
<section class="top-content">
<header></header>
<h2>My Intro Text</h2>
<footer>
<p class="post-info">Written By: MWQ</p>
</footer>
<article>
<p>
Eram admodum occaecat. Esse
laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit
doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat
amet ne proident firmissimum te se quo anim nescius id quorum appellat an
laborum.
</p>
</article>
</section>
<section class="top-content">
<header></header>
<h2>Video Tutorial</h2>
<footer>
<p class="post-info">Written By: MWQ</p>
</footer>
<article>
<p>
Eram admodum occaecat. Esse
laboris expetendis, possumus nam amet ab ipsum concursionibus commodo velit
doctrina ad sunt ne nostrud an aliqua, tamen admodum quo voluptatibus, consequat
amet ne proident firmissimum te se quo anim nescius id quorum appellat an
laborum.
</p>
</article>
</section>
</div>
<!----------Side Bar--------->
<aside class="theSidebar">
<aside>
<article>
<h1> First Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<aside>
<article >
<h1> Second Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
<aside>
<article >
<h1> Third Side Bar </h1>
<p>Eram admodum occaecat. Esse laboris expetendis, possumus nam amet ab ipsum oncursionibus commodo velit doctrina.
</p>
</article>
</aside>
</aside>
<!----------Footer--------->
<footer><p>Copy Rights</p></footer>
</body>
</html>
I have made changes to the CSS file, adding the position attribute.
If you want to read more about this attribute of CSS, visit https://www.w3schools.com/cssref/pr_class_position.asp.
Hope it helps...
Hi I want to push 2 elements to each corner like what float actually do
so I give the parent display flex and justify-content, space between but it seems like theres margin left before the first element and margin right after the last element.
in this example the header is parent and h1 is the first element and nav is the last element.
I want h1 stick to the left and nav stick to the right with display flex.
HTML
<header>
<h1>Thermos</h1>
<nav>
<a href='#'>Add URL</a>
<a href='#'>Sign Up</a>
<a href='#'>Sign In</a>
</nav>
</header>
<main>
<section id='main'>
<div id='intro'>
<h1>Welcome</h1>
<p>Thermos is a simple social bookmarking site. Or actually, you can use it the way you want.</p>
</div>
<article>
<h2>Article section h2</h2>
<p>Qui ne magna delenit splendide, diam ullum regione vis no, an modo numquam eum. Ne ullum clita libris vel. In tantas graeci molestiae eam, ei sed aeterno aperiri fabulas. Quo eu quod dicta, nec sint expetenda eu. Aeque nobis verterem ea cum, sed no hinc salutandi consetetur. Volumus assueverit in qui, commodo nominavi ad pro.</p>
</article>
<article>
<h2>Article section h2</h2>
<p>Qui ne magna delenit splendide, diam ullum regione vis no, an modo numquam eum. Ne ullum clita libris vel. In tantas graeci molestiae eam, ei sed aeterno aperiri fabulas. Quo eu quod dicta, nec sint expetenda eu. Aeque nobis verterem ea cum, sed no hinc salutandi consetetur. Volumus assueverit in qui, commodo nominavi ad pro.</p>
</article>
</section>
<aside>
<h3>Aside</h3>
<p>Dico tantas definiebas eum ad, nostrum reprimique duo no. Ut pri causae ponderum, ea per erat facilisis. Ad clita utroque vel, in stet animal meliore per. An audire ponderum disputando usu, eu nam ipsum clita menandri, cu tempor maiestatis persequeris quo.</p>
</aside>
</main>
CSS
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,
samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
*,*:before,*:after{box-sizing:inherit}
*:before,*:after{content:''}
html{box-sizing:border-box}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul,ul li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:inherit}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
html, body {
font-family: Lato;
font-size: 16px;
}
header {
background-color: #FB7524;
color: #fff;
display: flex;
justify-content: space-between;
border-bottom: 20px solid #D74411;
margin-bottom: 30px;
}
header > * {
}
header > h1 {
font-size: 2rem;
font-weight: 700;
align-self: center;
}
nav {
font-size: 0;
}
nav > a {
font-size: 1.1rem;
display: inline-block;
width: 100px;
padding: 40px 0;
text-align: center;
margin-left: 10px;
background-color: #D74411;
}
nav > a:first-child {
margin-right: 0;
}
main {
display: flex;
justify-content: space-between;
}
section#main {
width: 60%;
margin-left: 40px;
}
section#main #intro {
margin-bottom: 30px;
}
section#main #intro h1 {
font-size: 2rem;
font-weight: 400;
margin-bottom: 10px;
}
section#main #intro p {
font-size: 1.1rem;
}
section#main article {
margin-top: 20px;
}
section#main article h2 {
font-size: 1.3rem;
font-weight: 400;
margin-bottom: 10px;
}
section#main article p {
font-size: 1.1rem;
text-align: justify;
}
aside {
transition: 0.3s all ease-out, margin 1ms,
bottom 0.2s;
width: 30%;
min-width: 300px;
max-height: 300px;
margin: 0 40px 0 20px;
background-color: #FB7524;
border-top: 20px solid #D74411;
padding: 20px;
}
aside h3 {
font-size: 1.3rem;
font-weight: 400;
color: #fff;
margin-bottom: 20px;
}
aside p {
font-size: 1.1rem;
color: #fff;
text-align: justify;
}
#media (max-width: 750px) {
aside {
height: 200px;
width: auto;
margin: 0;
position: fixed;
bottom: -100px;
opacity: 0.3;
}
aside:hover {
bottom: 0;
opacity: 1;
}
}
Here is a JSFiddle.
You're giving your element an empty content :before & :after which is messing with your styles. Is there a particular reason why you're applying them to every element?
Remove the :before & :after and it should work as expected.
CSS
*:before,*:after{content:''} /* Remove this */
JSFiddle
Why is this happening?
Because with the :before & :after inside of your flex container, it sees 4 elements instead of the 2 you want the styles to apply to. I created an example of what is happening:
Example: Extra in-flow elements (your issue)
You need to set the header to flex: 1. This should remove the unwanted margin and lets all the flexible items be the same length, regardles of its content:
header > h1 {
flex: 1;
}
image
So I have a div full of main article content with a width of 600px and I would like to have these links as well at the side, I imagine it would be in the same div but I can't seem to get the right effect and need some help with this.
Thanks a lot.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="pagewrap">
<div id="logos">
<img id="logo" src="img/logo.png">
<h1 id="name">Company Name</h1>
<img class="socialmedia" src="img/facebook.png">
<img class="socialmedia" src="img/twitter.png">
<img class="socialmedia" src="img/googleplus.png">
</div>
<div id="header">
<div id="menu-outer">
<div class="table">
<ul id="horizontal-list">
<li>Home</li>
<li>eBooks</li>
<li>Magazines</li>
<li>Movies</li>
<li>Help</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
<div id="content">
<h2>Lorem Ipsum Dolor Sit</h2>
<p id="article-information">posted on 15 May 2015 by Author</p>
<img id="main-article-image" src="img/placeholder.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer
fringilla. Integer fringilla. Pellentesque acturpis. Sed elementum, felis quis porttitor
sollicitudin, augue nulla sodales sapien, amet posuere quam purus at lacus. Nam id neque. Morbipulvinar nulla sit amet nisl. Etiam pharetra lacus sed velit
imperdiet bibendum. ed quis elit. In hac habitasse platea dictumst. Maecenas
justo. Donec interdum vestibulum libero. Nam laoreet dui sed
magna. Nam consectetuer mollis dolor. Aenean ligula.
liquam sed erat. Donec interdum vestibulum libero. Mauriset dolor.</p>
<div id="more-links-list">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
</div>
<div id="sidebar">
<h3>A guide to snoopsetting</h3>
<img class="aside-images" src="img/placeholder.png">
<h3>Welcome to the Surveillance State</h3>
<img class="aside-images" src="img/placeholder.png">
</div>
<div id="footer">
</div>
</div>
</bo
dy>
CSS
body {
font: 1em/150% Arial, Helvetica, sans-serif;
}
a {
color: #669;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#logo {
width: 20%;
height: auto;
position: relative;
right: 25px;
top: 50px;
}
#name {
position: relative;
bottom: 60px;
left: 170px;
font-style: italic;
font-size: 55px;
height: 30px;
}
.socialmedia {
position: relative;
width: 8%;
bottom: 155px;
height: auto;
float: right;
}
#main-article-image {
width: 600px;
height: 450px;
}
.aside-images {
width: 340px;
height: 255px;
}
#more-links-list {
display: inline;
}
/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
padding: 5px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#logos {
height: 160px;
}
#header {
height: 50px;
}
#content {
position: relative;
width: 600px;
float: left;
text-align: justify;
}
#more-links-list {
float:right;
padding: 10px;
margin-left:10px;
margin-bottom:10px;
background:#ddd;
}
#sidebar {
width: 340px;
float: right;
position: relative;
bottom: 34px;
}
#footer {
clear: both;
width: auto;
height: 100px;
}
#article-information {
margin: 0px;
}
h2 {
margin: 0px;
padding-top: 56px;
}
h3 {
margin: 0px;
padding-top: 38px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
width: 16.65%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
#media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
}
/* border & guideline (you can ignore these) */
#header, #content, #sidebar {
margin-bottom: 5px;
}
#footer {
background-color: #eee;
border-style: solid;
border-width: 1px;
}
You can do this by placing a div with float:right; style inside the div that holds your content (article text), I created this example for you:
https://jsfiddle.net/davoscript/tjf56jLw/4/
<p>
<!-- The floating box -->
<div id="more-links-list" style="float:right;">
<p>list</p>
<p>items</p>
<p>lol</p>
</div>
<!-- The article content -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum. Integer...
</p>
Let me know if that works.
You should probably put the links into an <aside>. This could go below the code for the text in your div and then styled with either a float or positioning. It would then be a matter of getting your styling to allow the text to wrap under the links.
I have been working on a site, found here, and it looks fine on my monitor (1440 x 900) however it looks very plain when displayed on an oversized monitor. I give the outer box an absolute height and width and this is obviously the reasoning for my issue but what could I do to fix this problem when the images are all a fixed height and width?
I read somewhere that I could do a check to see what dimensions the monitor is on page load - would anyone recommend this?
On a larger monitor there is a lot of blank space to the left and right, and also below the outer box.
thank you for any help!
-Evan
You can do it using two ways:
CSS 3 Media Queries
Fluid Layout
Since you said you will be supporting IE too, CSS 3 Media queries won't be working below IE 9, so lets use fluid layout. For this, you can do a few stuffs:
CSS Changes
#full-height-template-container {width: 1225px;}
#navigation-menu-container {width: 149px;}
#static-frontpage-padding {width: 855px;}
Replace it to:
#full-height-template-container {width: 90%;}
#navigation-menu-container {width: 20%;}
#static-frontpage-padding {width: 80%;}
A few adjustments might be necessary.
CSS 3 Media Queries
Media queries are one of the most exciting aspects about CSS today. They will allow us to change our layouts to suit the exact need of different devices – without changing the content.
Example & Demo for CSS 3 Media Queries
HTML Markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Media query Resolution Dependent Layout</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheets/master.css" />
</head>
<body>
<div id="container">
<h1>
Site name
</h1>
<div id="nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div id="content">
<h2>
Main heading here
</h2>
<p>
<img class="feature-image" src="fern.jpg" alt="fern" />Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
</div>
<div id="extras">
<h3>
Related info
</h3>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
CSS code
/* ----------------------------
simple reset
---------------------------- */
html, body, ul, ol, li, form, fieldset, legend
{
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
table
{
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}
input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}
abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}
body
{
margin: 20px;
color: #000;
background: #fff;
font: 90%/1.3 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}
#container
{
float: left;
width: 1000px;
background: #bbb;
}
#nav
{
float: left;
width: 200px;
background: lime;
}
#content
{
float: left;
width: 550px;
margin: 0 0 0 25px;
background: yellow;
}
#extras
{
float: right;
width: 200px;
background: gray;
}
.feature-image
{
float: right;
margin: 0 0 10px 10px;
}
#media screen and (max-width:999px)
{
#container { width: 800px; }
#extras
{
clear: left;
float: none;
margin: 0 0 0 225px;
width: 550px;
}
}
#media screen and (max-width:480px)
{
#container { width: 400px; }
#nav
{
float: none;
width: auto;
}
#content
{
float: none;
width: auto;
margin: 0;
}
#extras
{
float: none;
width: auto;
margin: 0;
}
.feature-image { display: none; }
}
Demo
You can find a working demo at CSS3 Media query layout example. Enjoy!