Hi stackoverflow community. I am building a responsive page and at the moment I am styling elements to show on mobile devices. I have got three elements within the div where image and teaser seem to perfectly fit after small styling adjustment. However, the headline despite width:100% specification doesn't fill up the space as it should. The problem is that the other div is dropping words of the text later than the top one when the page gets minimized. It just doesn't look estetic. I am a bit stuck tried different stylings, but it is still not working.
Below I provide a CSS code for the div I have a trouble with if this is not enough to see the problem, please do let me know and I will post the full HTML for both elements and also css for responsive and original styling:
.list_of_reviews_1 { /* this is a div's css*/
width:100%;
top:40px;
left:-45px;
border:solid;
}
.list_of_reviews_1 li { /*this is a headline*/
left:-41px;
width:100%;
top:40px;
margin:auto;
}
.list_of_reviews_1 img { /*image*/
left:0px;
}
.list_of_reviews_1 p { /*teaser*/
top:50px;
margin:auto;
width:100%;
}
Please see the code below as per request:
HTML:
<html>
<body>
<link href="example.css" rel="stylesheet">
<div class="list_of_reviews_1">
<ul style="list-style-type:none">
<li>What will happen to Brittish travelers when Brexit finaly happens</li>
</ul>
<img src="for left column.jpg" height="150" width="150" alt="What will happen to Brittish travelers when Brexit finaly happens"/>
<p>Moreblablabla</p>
</div>
<div class="right_column">
<p class="most">Most popular</p>
<ul style="list-style-type:none">
<li>What will happen to Brittish travelers when Brexit finaly happens</li>
</ul>
<img src="for left column.jpg" height="150" width="150" alt="What will happen to Brittish travelers when Brexit finaly happens"/>
<p>ufisuhodsiuhosiughig</p>
</div>
</html>
</body>
and CSS:
.list_of_reviews_1 {
position:relative;
width:65%;
top:-38px;
margin-left: 45px;
}
.list_of_reviews_1 img {
position:relative;
top:40px;
}
.list_of_reviews_1 p {
position:relative;
top:-48px;
width:54%;
margin-left:170px;
font-family: "Times New Roman", Times, Serif;
}
.list_of_reviews_1 li {
position:relative;
top:110px;
font-family: "Times New Roman", Times, Serif;
line-height: 1.5;
font-size: 30px;
width:70%;
margin-left:130px;
}
.right_column {
position:relative;
height:45%;
width:35%;
top:-2024px;
margin-left: 790px;
}
.most {
position:relative;
top:0px;
font-family: "Times New Roman", Times, Serif;
font-size: 30px;
width: 35%;
margin-left: 145px;
float:centre;
}
.right_column ul {
position: relative;
top: -30px;
font-family: "Times New Roman", Times, Serif;
font-size: 30px;
width: 100%;
float: right;
margin-left: 590px;
}
.right_column img {
position:relative;
top:-30px;
margin-left:150px;
}
.teaser {
position:relative;
top:-20px;
}
#media screen and (max-width:850px) {
.list_of_reviews_1 {
width:100%;
top:40px;
left:-45px;
border:solid;
}
.list_of_reviews_1 li {
left:-41px;
width:100%;
top:40px;
margin:auto;
}
.list_of_reviews_1 img {
left:0px;
}
.list_of_reviews_1 p {
top:50px;
margin:auto;
width:100%;
}
.right_column {
width:100%;
top:1140px;
left:-790px;
border:solid;
}
.most {
left:-145px;
}
.right_column img {
left:-145px;
}
}
I know the code is quite long, but these are all necessary parts to understand the problem. The main problem is in the media query as in the 'list_of_reviews_1 li'
Related
I'm trying to figure out why this footer is acting unusual. If you notice in the demo the HR tag in the location section is being pushed to the bottom of the page. Which is changing the layout. Also i'm trying to get the Facebook Icon to float:left so that it will be to the left of the HR tag within the "Network With Us section." My CSS looks fine to me, but this is the first time i've used the section tags for html5.
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
Here is my Demo
#footer {
background-color:#95643d;
width:100%;
margin:30px 0px 0px 0px;
clear:both;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:2em;
}
#footer hr {
width:60%;
float:left;
height:4px;
background-color:#FFF;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
}
#footer_logo {
width:25%;
float:left;
background-color:#95643d;
}
#footer_logo img {
margin:20px 0px 0px 20px;
}
#footer_network {
width:25%;
float:left;
background-color:#95643d;
}
#footer_contact {
width:25%;
float:left;
background-color:#95643d;
}
#footer_network img {
float:left;
}
}
#footer_location {
width:25%;
float:left;
background-color:#95643d;
}
You can use this CSS:
/* Footer */
#footer {
background-color:#95643d;
width:100%;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:2em;
text-align: center;
}
#footer hr {
width:100%;
float:left;
height:4px;
background-color:#FFF;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
text-align: center;
margin-bottom: 10px;
}
#footer_logo {
width:100%;
float:left;
background-color:#95643d;
}
#footer_logo img {
margin: 10px auto;
display: block;
}
#footer_network {
float:left;
background-color:#95643d;
width: 33%;
}
#footer_contact {
width: 33%;
float:left;
background-color:#95643d;
}
#footer_network img {
margin: 0 auto;
display: block;
}
#footer_location {
display: inline-block;
background-color:#95643d;
width: 34%;
}
Also i'm having troubles applying a background-color or a margin-top:50px to my #footer.It's as if the #footer is ignoring me.
When you have floats, the parent element collapses, so you have to clear the floats. One often-used technique is the clearfix class. Applied to your element it would look like this:
#footer:after {
content: "";
display: table;
clear: both;
}
I have a fiddle with cleaner code that you can use parts of it, or the whole thing, at your convenience. https://jsfiddle.net/r3ruzLL2/2
https://jsfiddle.net/r3ruzLL2/2/embedded/result/
EDIT: For the Facebook logo, an easy solution is to use a negative margin-top.
Add this rule:
section{
overflow:hidden;
}
Here you go, this seems to be fixing your problem: http://jsfiddle.net/weissman258/kpo4y108/10/.
Here are the things I added.
#footer {
display:inline-block;
}
#footer_network {
position:relative;
}
#footer_network a {
position:absolute;
left:0;
}
#footer_location {
display:inline-block;
}
As well as removing:
#footer_network img {
float:left;
}
Edit: Your first line on location seemed to be aligned right, so made another change to fix it:
#footer p {
clear:left;
}
Here is a fiddle for you https://jsfiddle.net/kpo4y108/6/ . You have break's in your html that you don't need. You have background's in different div's, which you don't need if you are only going to have one color. Let me know if you have any questions.
<div id="footer">
<section id="footer_logo">
<img src="http://nuskinprinting.com/atticstash/images/as_logo.png" />
</section>
<section id="footer_network">
<a><img src="http://nuskinprinting.com/atticstash/images/facebook_icon.png" /></a>
<h3>Network With Us</h3>
<hr />
</section>
<section id="footer_contact">
<h3>Contact Us</h3>
<hr />
<p> Vivian#advancedlitho.com<br />(972)999-9999 </p>
</section>
<section id="footer_location">
<h3>Location</h3>
<hr />
<p> Orange Circle Antique Mall<br />118 South Glassell Street<br />Orange, CA 92866<br />(714)538-8160<br />Mon. 10 a.m. - 4:45 p.m.<br />Tues - Sat 10 a.m. - 5:45 p.m.<br />Sun. 11 a.m. - 5:45 p.m. </p>
</section>
</div>
css:
/* Footer */
#footer {
background-color:black;
width:100%;
margin:30px 0px 0px 0px;
clear:both;
float:left;
}
#footer h3 {
font-family: 'Dancing Script', cursive;
font-weight:700;
color:#FFF;
font-size:1.5em;
margin:0px;
padding:0px;
}
#footer hr {
width:60%;
float:left;
height:4px;
}
#footer p {
margin:0px;
padding: 0px;
color:#FFF;
font-family: 'Arimo', sans-serif;
float:left;
word-wrap:break-word;
}
#footer_logo {
width:25%;
float:left;
}
#footer_logo img {
margin:20px 0px 0px 20px;
max-width:80%;
}
#footer_network {
width:25%;
float:left;
}
#footer_contact {
width:25%;
float:left;
}
#footer_network img {
float:left;
width:25px;
height:25px;
margin: 5px 5px 0 0;
}
#footer_location {
width:25%;
float:left;
}
I am having a logo and search bar on header. Logo is on the left corner. I want the search bar at the center of the header. What ever i try its half hidden in the navigation menu. Here is a rough jsfiddle
#header {
position:relative;
float:left;
clear:both;
width:100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
}
#header img {
position:relative;
left:20px;
top:13px;
border:0;
}
#header-search {
position:relative;
left:220px;
}
Try this
Using float to both #header img & #header-search with additional margin to customise the spacings.
#header {
position:relative;
float:left;
clear:both;
width:100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
}
#header img {
position:relative;
left:20px;
top:13px;
border:0;
float: left;
}
#header-search {
position:relative;
float: left;
margin-left: 40px;
margin-top: 30px;
}
JSFiddle
I recommend you to follow the css float concept for this. I have updated your fiddle based on my understanding. Have a look at it.
FIDDLE: http://jsfiddle.net/kiranvarthi/yaqxpm8e/4/
#header .logo {
float: left;
}
#header-search {
float: left;
margin: 30px;
}
Managing this without magic numbers can be achieved using a combination of floats and inline block
#header {
position:relative;
float:left;
width: 100%;
height:110px;
background:url("resources/images/logo.jpg") repeat-y;
font-size:30px;
background:#ccc;
text-align: center;
}
#header a {
float: left;
margin: 13px;
/* doesn't quite calculate (110-85)/2 = 12.5 */
}
#header-search {
display: inline-block;
margin-top: 35px; /* (110-40)/2 = 35px */
height: 30px;
}
<div id="header"> <a href="login.html"><img src="http://lorempixel.com/output/abstract-q-c-200-85-4.jpg"
width="200" height="85" /></a>
<div id="header-search">
<form id="searchForm" action="searchproduct.json">Product Name:
<input type="text" name="productName" value="${product.productName}" id="productName" />
<input type="submit" value="Search" />
</form>
</div>
</div>
Note - this method maintains the centered div responsively until the header is too narrow to support it. then you would need media queries.
JSFiddle Demo
I busy in the process of creating a website and currently seem to be having an issue with logo that keeps hiding its self away.
I'm not to sure what I'm doing wrong I have added my html and css here so that hopefully some one can tell me what I have done wrong please.
I am currently using the html5 boilerplate template as well but have commented out the code in the mean time this is the html part of the code:
<!--header -->
<div id="header">
<div id ="logo">
<h1></h1>
</div>
<div id= "hmenu">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Bar</li>
<li>Specials</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
this is the the css code for the header and logo and menu:
body,#container
{ margin:0;
border:0;
height:100%;
font:Arial, Helvetica, sans-serif;
background:url(../Images/bgImg.png) repeat-x ;
}
body > #container
{
height:auto;
min-height:100%;
}
#header
{
background:url(../Images/hdBgImg.png);
width:100%;
height:115px;
}
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
heigh:142px;
cursor:pointer;
}
#hmenu
{
font-size:38px;
font-family:Tangerine, sans-serif;
font-weight::bold;
text-align:right;
text-shadow:3px 2px 3px #333;
border-radius:8px;
position::absolute;
top:10px;
right:10px;
}
#hmenu ul
{
height:auto;
padding:8px 10px;
margin:0.1em;
}
#hmenu li
{
display:inline;
padding:20px;
}
#hmenu a
{
text-decoration:none;
color:#FFF;
padding:8px 8px 8px 8px;
}
#hmenu a:hover
{
color:#8AAB8E;
back:#fff;
}
when I try to get the logo added then it moves my menu of the header and it some how creates a double logo too.
any help would be great thanks.
previous CSS code:
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
heigh:142px;
cursor:pointer;
}
suggested to fix
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
}
let me share an updated JSFIDDLE link
may you could see what's missing
Change heigh to height:-
#header #logo
{
background:url(../Images/logo.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
display:block;
}
#header #logo
{
background:url(Images/1.png) no-repeat;
width:272px;
height:142px;
cursor:pointer;
display: inline-block;
}
Again I have some issues with float:left property.
I have three divs. I want to float "holder" to left side of the first div, but it doest work with my code.
This is my code:
HTML
<div id="investments">
<div class="visual_text_holder"><p>co</p><p>re</p></div>
<div id="holder">
<h4>SOMETHING</h4>
</div>
<div class="visual_text_holder"><p>id</p><p>ea</p></div>
</div>
AND CSS:
#investments{
margin: 0 auto;
margin-top:40px;
width: 910px;
}
.visual_text_holder {
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
width:140px;
}
#investments:after {
content: '';
display: block;
visibility: invisible;
clear: both;
}
#holder {
width:700px;
float:left;
}
i hope this will help You.
JS FIDDLE:
http://jsfiddle.net/9ZWLP/
HTML:
<div id="investments">
<div class="visual_text_holder"><p>co</p><p>re</p></div>
<div class="holder">
<h4>SOMETHING</h4>
</div>
<div class="clearer" ></div>
<div class="visual_text_holder"><p>id</p><p>ea</p></div>
</div>
CSS:
#investments{
margin: 0 auto;
margin-top:40px;
width: 910px;
}
.visual_text_holder{
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
width:140px;
float:left;
}
.holder{
width:700px;
float:left;
}
.clearer{
clear:both;
}
.visual_text_holder { display: inline-block }
Per https://developer.mozilla.org/en-US/docs/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
Thus, block elements (as <div> is by default) will not wrap around a float.
FOR WITHOU CHANGING IN HTML CODE CHANGES AS BELOW IN CSS
.visual_text_holder {
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
width:140px; float:right;
}
#holder {
width:615px;
float:left;
}
FOR MAKE DIV IN QUE WISE LIKE ( first somting, second co re, third id ea)
.visual_text_holder {
font-family: "Times New Roman";
font-size:7.5em;
text-transform:uppercase;
line-height:60%;
width:140px; float:right;
}
#holder {
width:615px;
float:left;
}
<div id="investments">
<div class="visual_text_holder"><p>id</p><p>ea</p></div>
<div class="visual_text_holder"><p>co</p><p>re</p></div>
<div id="holder">
<h4>SOMETHING</h4>
Height of a div
I'm trying to set the size of a div according to its content.
See the complete code here.
Basically my problem is in the div: content
In the HTML code look for the comment: wrongly
There had to add a tag p, I'm giving it a clear that the div align to the end.
Without this clear, the div will cut the image.
Actually I wonder just a better way to do this task.
There seemed a good a place p with nothing in it only with a clear class so that this problem does not happen.
What do you recommend me? There is a better way to do this task?
The goal is not to let the rope div content:
Html
<div id="header">
<div class="headerLeft" />
</div>
<div id="waycontact">
<div class="contactPaula">
<p>paulaMACHADO</p>
<p>crea 11111/D-MG</p>
<p>(00) 0000 0000</p>
</div>
<div class="contactBeatriz">
<p>beatrizDAMAS</p>
<p>crea 22222/D-MG</p>
<p>(00) 0000 0000</p>
</div>
<div class="address">
<p>av. xxxxxxxl, yyy, sl. zzz, centro - belo horizonte - mg</p>
<p>cep: 00000-000 - telefax: (00) 0000 0000</p>
<p>xxxxx#yyyy.com.br</p>
</div>
</div>
<div id="content">
<img class="left" alt="Arquitetura" src="http://cdn.archdaily.net/wp-content/uploads/2009/05/1265154380_107-silos-090511-west-view-a4-allard-architecture-528x304.jpg" />
<h2>Sobre a empresa</h2>
<p>A AMSD é focada em qualidade..</p>
<p class="clear" /> <!--Wrongly!! -->
</div>
<div id="footer">
<a class="current" href="#">home</a>
|
quem somos
|
blog
|
na mídia
|
fale conosco
</div>
CSS
body
{
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
color: #666666;
}
a:link
{
color: rgb(124,71,111);
text-decoration: underline;
}
a:visited
{
color: rgb(41, 12, 36);
}
a:hover
{
color: rgb(91,25,79);
text-decoration: none;
}
a:active
{
color: #AB6D9C;
}
p
{
margin:2px;
}
ul
{
list-style-type: square;
}
li
{
line-height: 165%;
}
div#header
{
width:1024px;
margin:5px auto;
height:150px;
background-color: rgb(91,25,79);
}
div.headerLeft
{
height:100%;
width:900px;
border-right:10px solid rgb(169, 171, 174);
background-color: rgb(124,71,111);
}
div#footer
{
margin-top:10px;
text-align:center;
position:relative;
font-size: 1.27em;
}
div#content
{
margin:auto 40px;
width:200;
border:2px solid red;
}
/* Others
-----------------------------------------------------------*/
div.contactPaula p, div.contactBeatriz p
{
padding:0px;
margin:0px;
}
div.contact, div.contactPaula, div.contactBeatriz
{
margin-bottom:15px;
margin-top:0px;
}
div.contactBeatriz
{
float:right;
text-align:right;
}
div.contactPaula
{
float:left;
text-align:left;
}
div.address
{
text-align:center;
margin-bottom:30px;
}
div#waycontact
{
width:340px;
margin:20px 40px;
}
.clear, div.address, div#footer, div#waycontact
{
clear:both;
}
.left
{
float:left;
}
a.current
{
font-weight:bold;
}
Add a "overflow:hidden;" to the div#content so it will look like the following. You won't need a separate clear property and a p tag. Good luck :)
div#content
{
margin:auto 40px;
width:200;
border:2px solid red;
overflow:hidden;
}
To make a container expand to fill floated elements, give it an overflow property:
div.wrapper {
overflow: auto;
}
A better method than using an empty <div class="clear"> is to use the 'cearfix' method.
This is an example borrowed straight from HTML5Bolierplate
, just apply it to the div that is giving you trouble.
In your case #content will become #content.clearfix
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1;