This is probably has a really easy solution, since it is one of the most basic things in web design.
After a lot research and not finding the answer decided to ask it. Basically my webpage looks perfectly fine on my 13" Macbook but all the elements get messed up when I try to display it on my 27" desktop. I understand the core of the problem is that, when I set something to 300px, it covers much of the screen in 13" but just a little in 27" thus causing everything to sit on top of each other but I failed at finding a solution. Just to be clear, this is not a 100% issue of responsiveness, I don't want different layouts for different screens but I just want the same layout to look ok in many screens, just like you are resizing the page from the corners. Here is some of the code that I hope will be helpful. Also things that I have tried:
Using em instead of px. Not really helpful.
Using % instead of px. Not really helpful in cases like the first jumbotron where parent element doesnt have a defined height
HTML :
<body>
<div class="jumbotron">
<img src="images/banner.jpg" >
</div>
<div id="menu">
<ul class="nav nav-pills navbar-left">
<li> <p> 1 </p></li>
<li> <p> 2 </p> </li>
<li> <p> 3 </p></li>
<li> <p> 4 </p></li>
</ul>
<ul class="nav nav-pills navbar-right">
<li id="toleft"> <p> 5 </p> </li>
<li> <p> 6 </p></li>
<li> <p> 7 </p> </li>
<li> <p> 8 </p> </li>
</ul>
</div>
<!-- Script to fix navbar-->
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 450;
if ($(window).scrollTop() > navHeight) {
$('#menu').addClass('fixed');
}
else {
$('#menu').removeClass('fixed');
}
});
});
</script>
<div id="displayframe">
<div id="display">
<img id="mainimage" src="images/col1.jpg" height="420" width="960" />
</div>
</div>
<!-- Script for changing images with time-->
<script>
$(document).ready(function(){
var imageArray = ["images/col2.jpg", "images/col3.jpg", "images/col4.jpg", "images/col5.jpg", "images/ban.jpg"];
var count = 0;
function loadImage(){
$("#mainimage").attr("src", imageArray[count]);
if(count == imageArray.length){
count = 0;
}else{
count = count + 1;
}
}
setInterval(function(){
loadImage();
}, 3000);
})
</script>
<div class="container">
<div id="head">
<p> RECENT NEWS </p>
</div>
</div>
<div class="newsfeed">
<ul>
<li>
<p style="float: left;"> <img src="images/chris.jpg" width="190px" /> </p>
<h2></h2>
<p id="bodypart">
</p>
</li>
<li class="newselement"><p style="float: left;"> <img src="images/city.jpg" width="190px" height="280px" /> </p>
<h2></h2>
<p id="bodypart">
</p></li>
<li class="newselement"><p style="float: left;"> <img src="images/alex.jpg" width="190px" height="280px" /> </p>
<h2></h2>
<p id="bodypart">
</p></li>
</ul>
</div>
CSS:
body{
background-color: black !important;
}
.jumbotron{
height: 320px;
background-color: black !important;
}
.jumbotron > img{
width: 100%;
margin-top: -50px;
}
#toleft{
left: -10px;
position: relative;
}
.nav p{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
}
.navbar-left{
margin-left: 20px;
position: relative;
}
.navbar-left li{
width: 120px;
}
.navbar-right{
left: -50px;
margin-left: 0px;
position: relative;
}
.navbar-right li{
width: 140px;
}
#menu{
background-color: black;
width: 99%;
margin-top: -110px;
}
.nav li p{
padding-left: 15px;
}
.fixed {
position: fixed;
top: 110px;
height: 50px;
z-index: 1;
background-color: black;
}
#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
margin-top: 130px !important;
border-radius: 4px;
background-color: white;
}
#display ul{
position: relative;
margin: 0;
padding: 0;
height: 960px;
width: 420px;
list-style: none;
}
#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}
#head > p{
font-family: "Crimson Text";
font-size: 30px;
font-weight: bold;
}
#head{
margin-top: 30px;
margin-left: 85px;
}
.tweets{
background-color: rgba(247,12,12,0.3);
margin-top: -800px;
margin-right: 50px;
border: 1px solid white;
border-color: white;
}
.newsfeed{
margin-left: 100px;
width: 60%;
height: 800px;
}
.newsfeed > ul{
list-style: none;
}
.newsfeed > img{
list-style: none;
display: inline-block;
position: absolute;
float: left;
}
.newsfeed > h2{
display: inline-block;
position: absolute;
margin-top: -50px;
margin-left: 50px;
float: right;
}
.newsfeed > li{
border-bottom: 1px white;
border-top: 1px white;
border-color: white;
height: 400px;
}
#bodypart{
font-size: 17px;
}
.newselement{
border-top: 1px solid white;
}
Actually this is responsive issue only because you are viewing your page on different screen or resolution. So if you want to create responsive website you have to add #media queries for different resolution.
-- #media queries
-- Outer div should keep fixed (px) or in percentage (%).
-- And inner div or content should wrap according to outer div width eg(width:100%).
-- Finally depend on different resolution change your css in #media queries.
Why use Px (pixels) which are pre-fixed? Instead play around with % (percents) which allow you to scale your webpage based on the user's screen. You could make your image 1600px wide which would be the full length of your MBP but for example on your Imac it only shows your image 1600px wide when really the Imac has 2880px for the screens width. Therefore you have another 1280px remaining to fill. If you were to use 100% it would fill 100% of who's ever screen is viewing your webpage. Hope this some what helps. You lost me on the 300px off.
I have setup a JSfiddle here.
I found a few things that you could add/modify to help improve your code and get things aligning better.
<img src="images/banner.jpg" > was not closed correctly you missed the / <img src="images/banner.jpg" />. Also you have no clearing tags anywhere in your code so of course when the width of your page scales out the elements on the page are going to stack up beside each other. I created a class;
<div class="clear"/>
.clear{
clear:both;
}
This i placed below each of your element sections so it will return them to the next line.
Next i placed a wrapper and a content div around your whole page content to center-align the content and make the page width 1000px (which is standard among most websites).
The images were not rendered into the JSfiddle becaise the paths are relative to your computer so i left them blank. If you want to see it working better please update the JSfiddle and i can help further.
-Epik
Related
From a long time, I get an issue about spaces which are appearing into a navigation menu bar betwwen <div> tags of this menu.
This problem only happens on Chrome (currently with Version 59.0.3071.115 (Build officiel) (64 bits) but it was the same with all previous version of Chrome).
Here's the following image illustrating the problem :
[![Space into navigation menu bar][1]][1]
You can also test it directly on the link :
[Link to see White spaces on Chrome][2]
My HTML menu is implemented like this :
<div id="nav_bar">
<table class="linkcontainer" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="navigation">
Home
</div>
</td>
<td>
<div class="navigation">
<a href="/astro/"
class="main_link">Fifo</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/sciences/"
class="main_link">Sciences</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/philo/"
class="main_link">Lifo</a>
</div>
</td>
<td>
<div class="navigation">
Exo
</div>
</td>
<td>
<div class="navigation">
FiLo
</div>
</td>
</tr>
</table>
</div>
with CSS :
a.main_link:active, a.main_link:visited, a.main_link:link {
font-weight: bold;
text-decoration: none;
display: block;
width: 100%;
color: #FFFFFF;
line-height: 50px;
}
div.navigation {
height: 50px;
width: 133px;
vertical-align: middle;
text-align: center;
border-right-width: 0;
border-left-width: 0;
margin: 0;
border: 0;
padding: 0;
}
table.linkcontainer {
border-collapse: collapse;
border-spacing: 0;
}
#nav_bar {
background-image: url(/images_template/header_bg_min.png);
background-size: 798px 50px;
border: 0;
margin: 0 auto;
padding: 0;
width: 798px;
height: 50px;
}
As you can see, there are 6 elements <div> with 133px for each of them, that makes 798px for the total width (see width of #nav_bar above)
Nevertheless, I have partially found a solution (which is not satisfying) by putting width: 101% for div.navigation (with Inspector interface of Chrome) :
div.navigation {
height: 50px;
width: 101%;
vertical-align: middle;
text-align: center;
border-right-width: 0;
border-left-width: 0;
margin: 0;
border: 0;
padding: 0;
}
Then I get the folowing menu on this image :
[![no more spaces but elements of menu are not centered][3]][3]
As you can see, by putting a width value over 100%, there are no spaces between <div> elements but now, they are not horizontally centered anymore like at the beginning of this post.
How could I do to keep this solution (to make disappear white spaces) and, in the same time, keep the horizontal centering of each <div> element of the menu ?
Maybe someone would have another solution to circumvent this issue of white spaces with Chrome ?
Regards
Your divs are wrapped in td elements.
Tables are notorious for having differences between browsers, due to early incompatibilities and inspecific standards.
You are also using tables for layout, which is largely regarded as a bad idea semantically speaking.
I suggest you stop using tables, and instead lay it out using other methods.
I tried to make a jsbin, to recreate your issue. but as stated on your question, and on the site linked, I was unable to reproduce the error.
This is one method of fixing it, without using tables.
https://jsbin.com/pahukezahu/1/edit?html,css,js,output
a.main_link:active, a.main_link:visited, a.main_link:link {
font-weight: bold;
text-decoration: none;
display: block;
width: 100%;
color: #FFFFFF;
line-height: 50px;
}
div.linkcontainer{
background:red;
}
div.navigation {
background:green;
height: 50px;
width: 133px;
display:inline-block;
vertical-align: middle;
text-align: center;
border-right-width: 0;
border-left-width: 0;
margin: 0;
border: 0;
padding: 0;
}
#nav_bar {
background-image: url(/images_template/header_bg_min.png);
background-size: 798px 50px;
border: 0;
margin: 0 auto;
padding: 0;
width: 798px;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body style="background:black">
<div id="nav_bar">
<div class="linkcontainer" style="width:100%">
<div class="navigation">
Home
</div><div class="navigation">
<a href="/astro/"
class="main_link">Fifo</a>
</div><div class="navigation">
<a href="/sciences/"
class="main_link">Sciences</a>
</div><div class="navigation">
<a href="/philo/"
class="main_link">Lifo</a>
</div><div class="navigation">
Exo
</div><div class="navigation">
FiLo
</div>
</div>
</div>
</body>
</html>
Note that there are no line breaks between the divs, I found that adding linebreaks introduced whitespace.
Try adding:
div.navigation {
line-height: 0;
}
Since you are setting a set width for your nav-boxes 133px, yet spacing them according to a % of the screen width it creates the blank spaces in between the nav-boxes to compensate for the missing space. What you could do, is set the width of each nav-box as a portion of the total width, you have 6 nav-boxes, they could all be (100/6)% width hence stretching and shrinking together to fill any screen size.
In addition to ensure they don't get too small you could add that the width of the individual nav-boxes should never be below 133px.
just try adding this to top of you css file.
*{
margin: 0;
padding: 0;
}
Hope it will help.
Another option is using a flexbox for the navigation menu.
body {
background-color: red;
}
a.main_link,
a.main_link:active,
a.main_link:visited,
a.main_link:link {
font-weight: bold;
text-decoration: none;
display: block;
width: 100%;
color: white;
line-height: 50px;
}
a.main_link:hover {
color: red;
}
div.navigation {
background-color: blue;
width: 133px;
height: 50px;
text-align: center;
}
#nav_bar {
width: 798px;
margin: 0 auto;
display: flex;
}
<div id="nav_bar">
<div class="navigation">
Home
</div>
<div class="navigation">
Fifo
</div>
<div class="navigation">
Sciences
</div>
<div class="navigation">
Lifo
</div>
<div class="navigation">
Exo
</div>
<div class="navigation">
FiLo
</div>
</div>
In my assignment, I've been having a lot of issues lately with height:x%; it's not accurate when used in some parts of my code, such as this:
My <a> element, a child of <div>, has a child <img>. <a> has padding of %1, and 100 - 2(to make up for the added height from padding) = 98% height of <div>. Since I want the entire picture to be clickable as a link, I nest the <img> in the <a> element with 100% height and width to fit right in. So I'm thinking at this point, I should see a picture of a dog that at least fits in vertically. However I get this:
https://gyazo.com/0b36f8c7efa70d7dc2b6155c821e1b1e
As you can see, the padding is correct, the width is, but the height is not. It extends by twice the padding of <a>. I tried also subtracting twice the padding from the height yet it makes a very small difference. It's still outside.
div#top {
width: 100%;
height: 20vh;
background-color: black;
color: limegreen;
}
a#homeiconlink {
width: 13%;
height: 98%;
padding: 1%;
float: left;
}
img#homeicon {
width: 100%;
height: 100%;
}
h2#title {
width: 85%;
height: 100%;
float: left;
}
h2 {
margin: 0;
font-family: Arial;
font-variant: small-caps;
}
body {
background-color: yellow;
}
div#sidebar {
width: 15%;
height: 60vh;
background-color: green;
float: left;
}
a {
text-decoration: none;
color: inherit;
}
a.sidebar:hover {
background-color: limegreen;
color: white;
}
a.sidebar {
display: block;
background-color: green;
color: limegreen;
padding: 2.5%;
}
div#contentspace {
width: 85%;
height: 60vh;
margin: 0px;
background-color: limegreen;
color: white;
float: left;
}
div#content {
padding: 2.5%;
}
div#footerspace {
width: 100%;
height: 20vh;
}
footer {
padding: 2.5%;
clear: both;
background-color: darkgreen;
color: limegreen;
margin: 0;
text-align: center;
}
div#testedwith {
font-style: italic;
color: lightgray;
text-align: right;
}
<div id="top">
<a href="home.html" id="homeiconlink">
<img src="dog.png" alt="logo" id="homeicon">
</a>
<h2 id="title">
Adopt a dog or cat Foundation
</h2>
</div>
<div id="sidebar">
<a class="sidebar" href="home.html">Home page</a>
<a class="sidebar" href="browse.html">Browse available pets</a>
<a class="sidebar" href="find.html">Find a dog/cat</a>
<a class="sidebar" href="dogcare.html">Dog Care</a>
<a class="sidebar" href="catcare.html">Cat Care</a>
<a class="sidebar" href="giveaway.html">Have a pet to give away</a>
<a class="sidebar" href="contact.html">Contact us</a>
</div>
<div id="contentspace">
<div id="content">
<h2>
Welcome!
</h2>
<br>
<p>
At Adopt a dog or cat foundation (TM), we strive to save as many endangered dogs and cats lives as possible from the animal pound. We invite all who are loving towards animals to adopt and care for a dog or cat of your choice from somebody who can no
longer give them the care they deserve. We strive to maintain a good community, and have a good reputation for that. Any dog or cat you adopt will most certainly be a good companion and are well trained and disease free. Thank you for helping us
shape the world into a more hospitable one!
<br>
<br>-AADOCF
</p>
</div>
</div>
<div id="footerspace">
<footer>
View disclaimer
<div id="testedwith">tested with Google Chrome</div>
</footer>
</div>
In your CSS, add box-sizing: border-box; a#homeiconlink {...}.
By default, when you specify a height, it does not take margins, padding, or borders into account. Specifying border-box changes this so that the height you specify is total height. More info at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model and https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I've been having an enormous amount of trouble for what I thought would be easy, but it's turning out to be much more difficult than I had anticipated.
I have an image alt="home" that I want to center in my footer, with text underneath it, but margin-left and margin-right: auto don't work, margin: 0 auto doesn't work either. Are there other options to center something?
And for the address, it's being pushed down because the width of the copyright and "home" img have a width the size of the footer. When I try to apply a width percentage to the div containing the home img and the copyright text, it disappears for some reason?
This is the result I want to achieve: http://i.imgur.com/khjrZow.jpg
jsfiddle (with complete html and css): http://jsfiddle.net/A2H3n/
If anyone knows what's going on, and can let me know, that would make me so happy... but really, I've spent 4 hours trying to fix this(I've just started learning CSS). Any help would be appreciated!
Relevant HTML:
<footer>
<div id="sociallinks">
<img class="sociallogo" src="images/facebooklogo.jpg" alt="Facebook">
<img class="sociallogo" src="images/Twitterlogo.jpg" alt="Twitter">
</div>
<div id="logoandtext">
<img id="footerlogo" src="images/blackbeltinverse.png" alt="home">
<p>© Hsien-Jin Martial Arts Studio<p>
</div>
<div id="contactinfo">
<p>7548 Mahogany Rd</p>
<p>Los Angeles, CA 97789</p>
<p>(444) 123-4567 </p>
</div>
</footer>
Relevant CSS:
footer{
overflow: hidden;
display: block;
margin: 0 auto;
color: #FFFFFF;
}
#sociallinks{
float: left;
margin: 0;
display: block;
width: 20%;
height: 100%;
}
.sociallogo{
width: 3em;
height: 3em;
}
#footerlogo {
width: 4em;
height: 4em;
margin: 0 auto;
}
#contactinfo {
line-height: 1.25em;
text-align: right;
}
display:inline-block; may be the answer:
footer{
text-align:center;
}
#sociallinks, #logoandtext, #contactinfo{
display:inline-block;
}
#contactinfo{
float:right;
}
Fiddle : http://jsfiddle.net/bonatoc/PLbae/1/
CSS overwrites are at the very bottom.
You can do it like this
Move the #contactinfo div above the #logoandtext
HTML
<div id="sociallinks">/*Some thing here*/</div>
<div id="contactinfo">/*Some thing here*/</div>
<div id="logoandtext">/*Some thing here*/</div>
CSS
#logoandtext {
margin: 0 140px;
text-align: center;
}
#contactinfo {
float: right
}
i have 4 social media buttons in a div and i want to space them equally but i can't figure out how to?
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<img src="Images/facebooksmall.png" />
<img src="Images/twittersmall.png" />
<img src="Images/googlesmall.png" />
<img src="Images/linkedinsmall.png" />
</div>
</div>
</div>
I would place a div around the images and place the height of the divs to 25%.
HTML
<div class="header">
<div class="headercontent">
<div class="socialbuttonstop">
<div class="social_btn">
<img src="Images/facebooksmall.png"/>
</div>
<div class="social_btn">
<img src="Images/twittersmall.png"/>
</div>
<div class="social_btn">
<img src="Images/googlesmall.png"/>
</div>
<div class="social_btn">
<img src="Images/linkedinsmall.png"/>
</div>
</div>
</div>
</div>
CSS
.socialbuttonstop {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
}
.social_btn {
height: 25%;
}
If your container div is a fixed width here's what I usually do, assuming 48x48 icons:
HTML
<div id="social">
<img id="twitter" />
<img id="facebook" />
<img id="linkedin" />
</div>
CSS
#social {
width: 154px;
height: 48px;
}
#social img {
width: 48px;
height: 48px;
float: left;
margin-right: 5px;
background-image: url('icons.png');
background-position: 0px 0px;
}
#social img:last-child{
margin-right: 0px;
}
#social img#twitter {
background-position: -48px 0px;
}
#social img#facebook {
background-position: -96px 0px;
}
Then make a PNG file with just the icons without any padding
I only can think of the use of padding:
HTML:
<div>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/twittersmall.png"/>
<img class="imagePadding" src="Images/googlesmall.png"/>
<img class="imagePadding" src="Images/linkedinsmall.png"/>
</div>
CSS:
.imagePadding
{
padding: 10px;
}
For vertically centering the block please check the following fiddle http://jsfiddle.net/L4su9/3/
.socialbuttonstop
{
height: 150px;
width: 35px;
position: absolute;
top:50%;
margin:-75px 0 0 0;
/* negate top pixels =-"total height/2" */
background:#000;
}
Semantically you should have the HTML set up using an unordered list:
<ul>
<li class="facebook"><span>Facebook</span></li>
<li class="linkedin"><a href="#"><span>Linked In</span></li>
</ul>
CSS:
ul {
height: 150px;
width: 35px;
margin-left: 915px;
position: absolute;
display: block;
}
ul li {
display: block;
width: 35px;
height: 35px;
}
ul li a {
display: block;
background-image: url(facebookSmall.png) no-repeat center;
}
ul li a span {
display: none;
}
Quick explanation. Basically the unordered list tells the browser or someone who is blind that it is a list - which it is. It is a list of social media buttons.
The anchors allows the user to click and go to your Facebook/Linked In page while the span tags enable you to provide helpful text to Google/search engines and those who are blind.
Of course, you CAN still you use the original HTML code that you have but then you should at the least apply alt attributes to the images and consider linking them with parent anchors.
I think this is more than enough information to get you started. I don't think it's fair for me (or anyone else) to give you the complete code. That's the beauty of coding! Problem solving.
I’m updating some legacy code on an old website, and the CSS is a nightmare. All I want to do is make the div that holds a username expand a bit when needed, and keep the outer div centered (horizontally) on the page. The myLabel control is populated based on a user’s name (it typically isn’t pre-defined as John Doe).
Currently, between the 800px value on myContainer, and the 350px value on myGridB, longer usernames are wrapping inside of the div. I’d rather display the long names on one line and, when possible, not bump the other controls to the next line.
I’ve tried using min-width on myContainer and myGridB , but that just allows the divs to expand across the whole page. I see this is common behavior for divs in this question.
I also tried some of the methods in this other question, but that pushed my header content to the left, and I need it centered.
I realize this code is a garbled mess, but I appreciate any ideas…
aspx:
<div class="myLogo1">
<div class="myContainer" style="width: 800px">
<div class="myGridC myLogo2 first">
<a onclick="loadMyHomePage(); "><img src="myImageAddress" /></a>
</div>
<div class="myGridB first last">
<div class="myHome myGridB first last">
<asp:Label runat="server" CssClass="myHome" ID="myLabel">
John Doe
</asp:Label>
<span class="myHome">
<asp:HyperLink NavigateUrl="mySettingsPage.aspx" runat="server">
My Settings
</asp:HyperLink>
</span>
<a href="myLogoutPage.aspx") %>">
<img src="myLogout.jpg") %>" alt="Logout" />
</a>
</div>
<div class="myGridB first last">
<div class="myGridA myPaddingA myHome">
<a href="myOtherPage" target="_blank">
<img width="180px" height="72px" src="myOther.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>
css:
.myLogo1
{
background-color: #363636; /* #000000; */
width: 100%;
height: 125px;
}
.myContainer
{
margin-left: auto;
margin-right: auto;
width: 960px;
}
.myGridA, .myGridB, .myGridC {
display: inline;
float: left;
margin-left: 5px;
margin-right: 5px;
}
.myGridA
{
width: 190px;
}
.myGridB
{
width: 350px;
}
.myGridC
{
width: 390px;
}
.myLogo2
{
border: none 0px transparent;
padding-top: 10px;
}
.first
{
margin-left: 0;
}
.last
{
margin-right: 0;
}
.myHome
{
text-align: right;
display: block;
vertical-align: top;
float: right;
position: relative;
font-size: 9pt;
}
.myHome span
{
font-size: 9pt;
float: left;
padding: 3px 5px 0px 0px;
}
.myContainer .myPaddingA
{
padding-left: 44px;
}
If it's ideas, how I usually horizontally center my divs is I set the container to a certain % width. then i use margin: auto; hope that helped.