Need help to solve some resolution issues on a project i'm currently working on.
Have a look here http://viewlike.us/?url=tinyurl.com%2Fsoreso&button.x=75&button.y=17&button=Submit
The css/layout was done as a liquid layout but as you can notice the columnns and the search box on the right start overlapping from 800*600 onwards.
At higher resolutions say 1920*1200 it starts looking a bit ugly particularly the search box on the right looks a bit stretched.
The site looks ok only when viewed at 1200*800 or at the next resolution.
What can i do to both
1)Make it work for 800*600 and above
2)Prevent it from looking ugly at higher resolutions
I'm also thinking about adding a media queries specific style sheet to make this work for smartphones, tablets etc.
Here's both the page and the css for it
index.php
<html>
<body>
<div id="wrap">
<div id="header">
<?php include("header.inc.php"); ?>
<div id="menu" align="left">
<div class="top_menu_left">
<li><?php echo $lang['HOME_LINK']; ?></li><li>|</li>
<li>Subscribe</li>
</div>
<?php if($auth->id) { ?>
<div class="top_menu_right">
<li>My Account</li><li>|</li>
<li>Watch List</li><li>|</li>
<li>Logout</li>
<?php }else{ ?>
<li>Login</li><li>|</li>
<li>Sign up</li>
</div>
<?php } ?>
</div>
</div>
<!--END OF MENU DIV CONTENT-->
<div align="center"><div id="bar"></div></div><br />
</div>
<div id="content">
<div id="left_content"> <?php include('left_sidebar.php'); ?> </div>
<div id="main_content">
<?php include("path.inc.php"); ?>
<div style="display:none;"><?php echo "<!--#&88;#&90;#&101;#&114;#&111;".
"#&83;#&99;#&114;#&105;#&112;#&116;#&115;#&46;#&99;#&111;#&109;-->"; ?></div>
<?php echo $content;unset($content);?>
</div>
<div id="right_content">
<?php
if($xview != "post" && $xview != "postimg")
{
?>
<div class="right_top" align="center"><?php echo $lang['SEARCH']; ?> <?php include("search.inc.php"); ?> </div>
<?php
}
?>
</div>
</div>
<div style="clear:both" ></div>
<div style="clear:both" ></div>
<div id="footer" align="center">
<div class="footer_menu">
<li>About us</li> <li>|</li>
<li><?php echo $lang['TERMS_OF_USE']; ?></li><li>|</li>
<li><?php echo $lang['PRIVACY_POLICY']; ?> </li><li>|</li>
<li>Contact us</li> <li>|</li>
</div>
<div class="footer_menu2">
<strong>Copyright © 2011 <?php if(($y=date("Y")) != 2011) echo "- $y"; ?> <?php echo $site_name; ?>. All Rights Reserved </strong>
</div>
</div>
</div>
</body>
</html>
Style.css
html { -webkit-text-size-adjust: 70%; }
body { margin:0px; padding:0px;font-family:Arial, Helvetica, sans-serif; }
b { font-size:14px;}
#wrap { width:100%; height:100%; background-color:#FFFFFF; padding: 0;}
#header {
padding: 10px;
height:251px;
}
#menu { width:100%; height:2.2em; margin-top:1%; background:#80b2e4; border- radius:10px; -moz-border-radius:10px; -webkit-moz-border-radius:10px;}
.top_menu_left {float:left; width:86%;height:35px; margin-left:3%;}
.top_menu_left li a { color:#fff !important; }
.top_menu_left li a:hover { color:#336699 !important; }
.top_menu_right {float:right; width:17%;;height:1.2em;}
li{list-style:none; float:left; color:#74677E;font-size:70%;font- weight:bold;font- family:Arial, Helvetica, sans-serif; text-align:left; padding:0 5px; -top:9px; color:#fff;}
.top_menu_left li {padding-right:1%; color:#fff;}
.top_menu_right li {padding-right:5%; color:#fff;}
#searchbar { width:100%; height:auto;margin-top:8%;}
#top_search {width:100%; height:auto;}
#bottom_search {width:89%; height:auto;padding-left:10.5%;font-size:75%;}
.sarch_box { width:10%; height:auto; float:left; margin-left:1%;font-size:75%;}
.box_1 { width:20%; height:auto; float:left;font-size:85%;}
box_1 input { width:80%; height:1.2em;font-size:85%;}
.box_1 select { width:70%; height:1.5em;font-size:85%;}
.box_2 {width:2%; height:auto; float:left;}
#content { width:87%; height:auto; margin-left:11%; margin-top:0; }
#left_content { width:7%; height:auto; float:left; }
#left_searchbar_title {width:95%;height:2%;padding-top:1%;padding-bottom:1%;padding- left:5%;background-color:#A5D959;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#left_sidebar_content{width:100%;height:2%;background-color:#EFFFD8;font-family:Arial, Helvetica, sans-serif;font-size:75%;}
#main_content { width:59%; height:auto;float:left; }
.main_content_header {margin-left:2%;color:black;font-size:100%;font- family:Arial, Helvetica, sans-serif;font-weight:bold;margin-bottom:5%;}
.content_header {width:70%; height:auto; margin-left:3%;}
/*.left_1 {margin-left:2%;width:.05em; height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left;padding-left:2px; }*/
.left_1 {margin-left:2%;width:.05em; height:100px;background-image:none;background- repeat:repeat-y;float:left;padding-left:2px; }
/*.left_6 { width:.05em;height:100px;background- image:url(images/verticalbar.gif);background-repeat:repeat-y;float:left; }*/
.left_6 { width:.05em;height:100px;background-image:none;background-repeat:repeat- y;float:left; }
.left_content_middle {width:95%;float:left;font-size:80%;font-family:Arial, Helvetica, sans-serif; background:white; border:1px solid #c6c6c6;border-radius:10px; webkit-border-radius:10px; -moz-border-radius:10px}
.content_title {padding:2%; text-align:center; color:black; <!--#336699;-->font-weight:bold;font-size:100%;font-family:Arial, Helvetica, sans-serif; }
.content_line{size:2px; width:95%; background-image:url(images/horizotal-line.gif);}
.left_2 { margin-left:3%; width:21.5%; height:auto; float:left; }
.left_3 { width:23.5%;height:auto;float:left;}
.left_4 { width:23.5%;height:auto;float:left;}
.left_5 { width:23.5%;height:auto;float:left;}
#right_content { width:20%;height:auto;background-color:white;float:left;margin- left:1%;padding:10px; border:1px solid #c6c6c6; border-radius:10px; webkit-border- radius:10px; -moz-border-radius:10px}
.right_top { width:100%; height:auto; color:white; font-size:100%; color:#336699;}
.Left_portion { width:45%; height:auto; float:left;padding-left:8%;}
.right_portion { width:45%; height:auto; float:left;}
.right_content_title {color:#BB532E;font-weight:bold;font-size:70%;font-family:Arial, Helvetica, sans-serif;padding-bottom:4%;padding-top:5%; }
.right_content_body {color:#5E6472;font-size:70%;font-weight:bold;font-family:Arial, Helvetica, sans-serif;padding-bottom:3%;}
.menu_bar { width:10%; font-family:Arial, Helvetica, sans-serif; color:red; float:left; font-size:50%;}
.gap {width:35%;}
#footer {height:40px;width:100%;margin:auto;text-align:center;text- align:center;margin-top:2%;background:url('images/footer_bg.png') repeat-x; line-height:40px; color:white;}
.footer_menu {
color: white;
float: right;
height: 1.2em;
-left: 3%;
width: 70%;
}
.footer_menu li {
color: white;
padding-right: 1%;
}
.footer_menu li a { color:#fff; text-decoration:none;}
.footer_menu li a:hover { text-decoration:underline}
.footer_menu2 {
background: url("images/footer_bg2.png") repeat-x scroll 0 0 transparent;
color: grey;
float: left;
font-size: 13px;
margin-top: 21px;
width: 100%;
}
.footer_menu strong { font-weight:lighter; color:#666}
Give max-width and min-width a try.
I'm guessing by liquid layouts you're using some form of percentages for it. In which case after a certain size the columns etc will be getting too large.
You will also most likely want to try min-width to stop the columns overlapping each other. You can prevent the text from going into the other columns by using overflow:hidden, however you would probably be better off just making the column have a minimum width and making the font-size smaller.
http://reference.sitepoint.com/css/max-width
http://reference.sitepoint.com/css/min-width
Related
I'm pretty new to web development, and I decided to recreate a few sites without looking at their source for practice (before I design and code them myself). Everything was going well until I added <p> tags inside my divs.
Things I've tried: z-index, using spans instead, rebooting my PC, closing my browser, using another browser. It's probably a noob mistake, and possibly a duplicate. If it is a duplicate, I'd appreciate you linking me to the other question rather than closing it without context. I've already tried searching for it, and I can't find any results.
Problem:
<div id="below-headbar">
<div id="cloud-based">
<img src="images/cloud-based.png">
<h1>CLOUD BASED</h1>
<p>Productimize comes with the unlimited cloud hosting space for your customizer. Whenever we release a new version of our product you get the new features with all the benefits at zero cost.</p>
</div>
<div id="dynamic-pricing">
<img src="images/dynamic-pricing.png">
<h1>DYNAMIC PRICING</h1>
<p>For each and every customizable part of the product, pricing can be fixed accordingly. Regardless of the eCommerce platform (Shopify, BigCommerce, or Magento), the dynamic pricing can be applied.</p>
</div>
<div id="print-ready">
<img src="images/print-ready.png">
<h1>PRINT READY</h1>
<p>Our customization engine captures all the design details given by customers. Customized design can be exported to print ready files in PDF, PNG, EPS and TIF formats. This way the whole order flow can be automated seamlessly.</p>
</div>
</div>
This is the HTML that I'm trying to get work. Everything inside it works, except for the text inside of the paragraph tags. As I said, I've already tried a few things. Here's the CSS that applies to it:
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
}
Any help/troubleshooting is appreciated. Here's the JSFiddle (Entire website so far, as I said, it's a copy of another website for practice):
https://jsfiddle.net/puvnw3a1/2/
The website looks a bit ugly without the images, but don't worry about that. Again, it's probably some beginner mistake. Thanks.
A quick look at your jsfiddle it says that your p tag has a font size of 0.
try:
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
text-align:center;
font-size: 16px;
}
Similar to what Awad said in his comment, I would suggest setting the font-size property in your css for #below-headbar div p so that it doesn't inherit the size from any other elements.
Remove font-size: 0; from #below-headbar, updated example:
#import url('https://fonts.googleapis.com/css?family=Montserrat');
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin:0;
}
html,body {
width:100%;
height:100%;
font-family: 'Roboto', sans-serif;
}
#font-face {
font-family:'Montserrat-Bold';
src:url("../fonts/Montserrat-Bold.ttf");
}
#wrapper {
width:1920px;
height:6000px;
margin:auto;
}
#logo-wrapper {
margin-top:30px;
margin-left:95px;
}
#headset-section {
width:100%;
height:830px;
}
#info-and-colors-wrapper {
width:950px;
height:100%;
}
#customize-info {
width:700px;
height:360px;
margin-left:95px;
margin-top:240px;
display:inline-block;
line-height:3rem;
}
#customize-info h1 {
text-transform:uppercase;
font-weight:300;
color:rgb(52,52,52);
color:#333;
font-family: 'Montserrat', sans-serif;
}
#customize-info h1 span {
display:block;
font-weight:700;
font-size:34px;
color:#333;
}
#customize-info p {
margin-top:20px;
font-size:26px;
color:rgb(102,102,102);
width:550px;
line-height:2.8rem;
}
#getstarted {
text-transform:uppercase;
font-weight:600;
color:white;
width:121px;
background-color:rgb(58,204,129);
height:46px;
text-align:center;
border-radius:4px;
margin-top:20px;
font-size:15px;
border:2px solid rgb(58,204,129);
cursor:pointer;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
}
#getstarted:hover {
background-color:white;
color:rgb(58,204,129);
}
#headset-colors {
height:300px;
width:50px;
margin-left:850px;
margin-top:-250px;
}
.headset-color {
height:40px;
width:40px;
display:inline-block;
border-radius:50%;
margin-bottom:20px;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
}
.headset-color:hover {
height:70px;
width:70px;
display:inline-block;
border-radius:50%;
margin-left:-15px;
cursor:pointer;
}
#red {
background-color:rgb(111,7,31);
}
#red:hover {
margin-top:-20px;
margin-bottom:10px;
box-shadow: 3px 3px 5px 3px rgba(101,5,21,.2);
}
#yellow {
background-color:rgb(237,202,37);
}
#yellow:hover {
margin-top:-15px;
margin-bottom:5px;
box-shadow: 3px 3px 5px 3px rgba(227,192,27,.3);
}
#orange {
background-color:rgb(251,144,63);
}
#orange:hover {
margin-top:-15px;
margin-bottom:5px;
box-shadow: 3px 3px 5px 3px rgba(241,134,53,.2);
}
#blue {
background-color:rgb(12,184,150);
}
#blue:hover {
margin-top:-15px;
box-shadow: 3px 3px 5px 3px rgb(2,174,140,.2);
}
#headset {
margin-left:1372px;
margin-top:-488px;
}
#headbar {
height:70px;
width:1920px;
display:flex;
vertical-align:center;
background-color:rgb(253, 251, 251);
border-bottom:1px solid rgb(226,226,226);
}
#headbar ul {
display:flex;
list-style-type:none;
width:400px;
margin:auto;
margin-right:-30px;
margin-top:25px;
}
#headbar ul li {
margin-right:45px;
box-shadow: 0px 3px 0px 0px rgb(253, 251, 251);
transition:300ms all;
border-bottom:10px solid rgb(253,251,251);
cursor:pointer;
}
#headbar ul li:hover {
box-shadow: 0px 3px 0px 0px rgb(58,204,129);
margin-bottom:-16px;
}
#request {
display:inline-block;
width:130px;
height:40px;
border-radius:10px;
background-color:rgb(58,204,129);
color:white;
margin-right:710px;
margin-top:15px;
line-height:40px;
text-align:center;
border:1px solid rgb(58,204,129);
transition:200ms all;
cursor:pointer;
}
#request:hover {
background-color:white;
color:rgb(58,204,129);
}
#below-headbar {
width:1260px;
height:400px;
margin:auto;
margin-top:100px;
/* comment out this style */
/* font-size:0; */
text-align:center;
}
#below-headbar div img {
width:130px;
height:auto;
display:block;
margin:auto;
}
#below-headbar div h1 {
font-size:26px;
color:#333;
font-weight:300;
font-family:'Montserrat-Bold';
width:250px;
margin-left:90px;
}
#below-headbar div p {
font-family:'Roboto', sans-serif;
font-weight:400;
line-height:27px;
color:#333;
width:350px;
height:250px;
margin:auto;
text-align:center;
}
#cloud-based, #dynamic-pricing, #print-ready {
width:420px;
height:400px;
display:inline-block;
color:black;
font-family:'Montserrat', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Productimize</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="logo-wrapper">
<img src="images/logo.png" width="265px" height="40px">
</div>
<div id="headset-section">
<div id="info-and-colors-wrapper">
<div id="customize-info">
<h1>
Product
<span>Customization</span>
Made Easy
</h1>
<p>
Start selling customized products and skyrocket your conversion rate.
</p>
<div id="getstarted">Get Started</div>
</div>
<div id="headset-colors">
<div id="red" class="headset-color" onclick="change("red")"></div>
<div id="yellow" class="headset-color" onclick="change("yellow")"></div>
<div id="orange" class="headset-color" onclick="change("orange")"></div>
<div id="blue" class="headset-color" onclick="change("blue")"></div>
</div>
<div id="headset">
<img src="images/redheadset.png">
</div>
</div>
</div>
<div id="headbar">
<ul>
<li>Portfolio</li>
<li>Pricing</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div id="request">Request a Demo</div>
</div>
<div id="below-headbar">
<div id="cloud-based">
<img src="images/cloud-based.png">
<h1>CLOUD BASED</h1>
<p>Productimize comes with the unlimited cloud hosting space for your customizer. Whenever we release a new version of our product you get the new features with all the benefits at zero cost.</p>
</div>
<div id="dynamic-pricing">
<img src="images/dynamic-pricing.png">
<h1>DYNAMIC PRICING</h1>
<p>For each and every customizable part of the product, pricing can be fixed accordingly. Regardless of the eCommerce platform (Shopify, BigCommerce, or Magento), the dynamic pricing can be applied.</p>
</div>
<div id="print-ready">
<img src="images/print-ready.png">
<h1>PRINT READY</h1>
<p>Our customization engine captures all the design details given by customers. Customized design can be exported to print ready files in PDF, PNG, EPS and TIF formats. This way the whole order flow can be automated seamlessly.</p>
</div>
</div>
</div>
</body>
<script>
hset = document.getElementById("headset");
function change(color) {
hset.innerHTML = "<img src=\"images/" + color + "headset.png\">";
}
</script>
</html>
I am trying to set out my webpage and I am facing a big problem. I have wrapped all of my code in a tag as I wish to wrap all of my content in an additional background of different color.
However when I set the attributes for my code this happens:
It is as if by bottom element is overlapping somehow with the two above. I am using column separators I do not know if this affects it. Here is my full CSS & HTML code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Featured</li>
<li>Coming Soon</li>
</ul>
<ul class="pull-right">
<li>Sign In</li>
<li>Register</li>
</ul>
<div id="logo-game">
<img src="http://upload.wikimedia.org/wikipedia/he/b/b7/Gamespot_logo.png">
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="feature-cont">
<div id="feature-cont-back">
<h1>100's Of Featured Game Reviews</h1>
<p>Browse through our collection of the most popular game reviews out there</p>
Find Out More
</div>
</div>
</div>
</div>
<div class="bodytwo">
<!--Recommened Section-->
<div class="recommended">
<div class="text-center">
<div class="container">
<ul>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Destiny.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_CODAW.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Evolve.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_AssassinsCreed.jpg"</li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FIFA.jpg"</li>
</ul>
<ul>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Forza.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_BattlefieldHardlines.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_GTAV.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Halo.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FarCry4.jpg"> </li>
</ul>
</div>
</div>
</div>
<!--Start Of Tables-->
<div class="mainc">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="new-game">
<table>
<tr>
<th colspan="3">Games</th>
</tr>
<tr>
<td>
<img src="http://static.gamespot.com/uploads/original/1197/11970954/2396871-battlefield4.jpeg">
<p>Battlefield 4 is the genre-defining action blockbuster made from moments that blur the line between game and glory...</p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/fifa_14/cover_large.jpg">
<p>This year it's all about the emotion of scoring great goals - the challenge of building play as a team...</p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/dead_island_riptide/cover_large.jpg">
<p>Take on hundreds of Zombies at once as your screen becomes swamped with the undead all after one thing…. You!</p>
</td>
</tr>
<tr>
<td height="400">
<img src="http://images.pushsquare.com/games/ps4/need_for_speed_rivals/cover_large.jpg">
<p>High speed meets high stakes in Need for Speed: Rivals. Play as a lone-wolf racer or a team-based cop as you speed... </p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps4/watch_dogs/cover_large.jpg">
<p>Join the Community and Social Team from GAME as they head to Paris for a special Watch Dogs event with Ubisoft!.. </p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/last_of_us/cover_large.jpg">
<p>From the creators of the Uncharted Series comes an emotionally-charged experience that’ll keep you gripped...</p>
</td>
</tr>
</table>
</div>
</div>
<!--End Of Tables-->
<!--Start of chart-->
<div class="col-md-6">
<div class="table-chart">
<table class="background">
<tr>
<th colspan="3"><h1>Game Charts</h1></th>
</tr>
<tr>
<td><h1>1</h1></td>
<td><img src="http://images.pushsquare.com/games/ps3/gran_turismo_6/cover_large.jpg"</td>
<td><h3>Gran Turismo</h3>View Review</td>
</tr>
<tr>
<td><h1>2</h1></td>
<td><img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg"</td>
<td><h3>Call of Duty:Ghosts</h3>View Review </td>
</tr>
<tr>
<td><h1>3</h1></td>
<td><img src="http://images.pushsquare.com/games/ps4/killzone_shadow_fall/cover_large.jpg"</td>
<td><h3>Killzone</h3>View Review</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--End of chart-->
</div>
<div class="feature-article">
<div ="feature-back">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Call Of Duty: Ghosts</h2>
<img src="http://eaglerising.com/wp-content/uploads/2013/11/call_of_duty_ghosts-hd-300x180.jpg">
<p>Build your team and take up to 6 of them into battle in the all new Squads mode. This mode takes the best parts of the multiplayer experience and allows you to play either solo or cooperatively with the custom soldiers created and leveled up in multiplaye</p>
</div>
<div class="col-md-4">
<div id="feature_back">
<h2>Grand Theft Auto V</h2>
<img src="http://ronewiznation.files.wordpress.com/2013/10/grand-theft-auto-game-cover.jpg?w=300&h=180">
<p>Grand Theft Auto V Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets, and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV. </p>
</div>
</div>
<div class="col-md-4">
<h2>Assasins Creed</h2>
<img src="http://www.ketubanjiwa.com/wp-content/uploads/2013/12/Assassins-Creed-IV-Black-Flag-Freedom-Cry-DLC-Reloaded-Single-Link-300x180.jpg">
<p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#121212;
}
.bodytwo {
background-color:white;
position:relative;
}
.nav {
background-color:black;
width:100%;
position:fixed;
z-index:5;
}
.nav li {
display:inline;
}
.nav a {
padding:10px 8px;
position:relative;
top:6px;
color:#FF6600;
text-transform:uppercase;
}
#logo-game img {
position:relative;
height:50px;
left:20%;
}
.jumbotron {
position:relative;
top:50px;
background-image:url('http://collectortoys.net/wp-content/uploads/2014/06/battlefield-4-server-bannerladder-standings-for-xboxone-battlefield-4---bf4-xbox-one-mretosqa.jpg');
height:500px;
z-index:2;
background-size:cover;
}
.feature-cont {
position:relative;
left:800px;
width:350px;
color:white;
z-index:2;
}
#feature-cont-back {
background-color:rgba(20,20,20,.5);
width:400px;
height:400px;
position:relative;
border-radius:10px;
padding:5px;
z-index:1;
}
.jumbotron h1 {
font-family:ubuntu, Arial;
}
.recommended li {
display:inline;
margin:auto;
float: none;
position:relative;
top:80px;
}
.new-game {
position:relative;
}
.new-game td, th {
padding: 0.5;
}
.new-game table {
border-collapse:separate;
border-spacing:15px 10px;
border: 1px solid black;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game tr {
padding:10px;
}
.new-game tr th {
text-align:center;
color:white;
font-family:ubuntu;
font-size:25px;
}
.new-game td {
padding:10px;
width:100px;
height:200px;
vertical-align:top;
background-color: rgba(24,24,24,.2);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game td p {
text-align:center;
font-family:arial;
font-size:12px;
color:white;
}
.new-game td img {
width:100px;
height:100px;
}
.background {
background: url("http://i1057.photobucket.com/albums/t390/Alexwileyy/box-01_zpsdd34bf84.png")
no-repeat;
height:500px;
width:424px;
}
.table-chart table {
position:relative;
border-collapse:separate;
}
.table-chart tr td h3 {
width:150px;
text-align: center;
font-family:Arial;
font-size:20px;
position:relative;
top:-20px;
color:black;
}
.table-chart td a {
position:relative;
top:-20px;
}
.table-chart td img {
width:100px;
height:100px;
}
.table-chart th h1 {
text-align:center;
font-family:ubuntu;
color: #dd6a15;
text-shadow: 0 2px rgba(0,0,0,0.75);
}
.table-chart td {
padding:15px;
box-shadow: 0 3px 1px rgba(26,26,26,0.75);
}
.feature-article {
position:relative;
clear:both;
height:400px;
border-bottom:3px solid #2f2f2f;
border-top:3px solid #2f2f2f;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/1_zps87c3163e.jpg');
}
.feature-article .col-md-4 {
width:370px;
height:200px;
text-align:center;
margin:auto;
z-index:1;
}
.feature-article .col-md-4 img {
width:300px;
height:180px;
}
.feature-article .col-md-4 p {
width:350px;
}
#feature_back {
clear:both;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/line-01_zps79e6ad19.png');
height:400px;
width:370px;
padding-left:10px;
background-repeat:no-repeat
}
/*Buttons Design*/
.view-review {
margin-top: 0px;
margin-right: 0px;
padding: 14px 26px;
font-size: 14px;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
color: #fff;
display:inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-weight: bold;
transition: background 0.1s ease-in-out;
/*for different browsers */
-webkit-transition: background 0.4s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
/*END*/
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.view-review:active {
padding-top: 15px;
margin-bottom: -1px;
}
.view-review, .view-review:hover, .view-review:active {
outline: 0 none;
text-decoration: none;
color: #fff;
border-radius: 3px;
}
.view-review {
background-color: #2f2f2f;
box-shadow: 0px 3px 0px 0px #ea6300;
width:150px;
height:35px;
}
.view-review:hover {
background-color: #454545;
}
.mainc .row {
position:relative;
top:80px;
}
To summarise I want to have the white background wrapped around only the table elements on the page running all the way down the page, however the bottom element is overlapping the tables.
Any idea at all of what I could possible do?
The problem is that you gave a 'top:80' to '.mainc .row'. This causes the overlap. Delete it, and your footer will not overlap the content. Also, give a 'margin-top:100px' to your '.mainc' class. this will fix the new overlapping problem.
You need to learn to use bootstrap more efficiently. Don't be afraid to abuse bootstrap's 'container' and 'row' divs. Think of those element as some big lego blocs that will stack themselves untop of each others.
Also I would not recommend using tables, as they are old-school and less edit-friendly. Use DIVs, you will have more control over them and they will adjust more easily with bootstrap.
If you want your site to be responsive, learn how to scale and place your columns accordingly by adding all of bootstrap 'col-x-x' classes.
You're adding position:relative all over for no good reason. In general you use position:relative to set the anchor point for absolutely-positioned child elements. You'd then use position:absolute to move those elements around in the layout.
If you need to perform minor tweaks of element positioning, use margin:, not position:relative.
I have a little problem with CSS hover...I have two divs in the same class but I wanna hover only one.
I already tried but it is not working and if it's working it changes for each color.
<div class="container iphone">
<!-- First box -->
<div class="span3 iphone-box-left">
======> <div class="quoteLeft"> <====== :hover
<blockquote>
<p>
description here
</p>
</blockquote>
<p class="credit">
johny
</p>
</div>
</div>
<!-- First box end -->
<!-- Second box -->
<div class="span6">
<img src="images/iphone.png">
<!-- Start Logo -->
<div class="logo-second">
<h3>
==============================================================
So when i hover on qouteLeft i wanna change the color on icon
this icon i also have in logo
====> <i class="icon-cloud icon-large"></i> <=================
creative
</h3>
</div>
<!-- Logo end -->
</div>
<!-- Second box end -->
CSS
.iphone {
position: relative; margin:50px auto; background:url(../images/11.png);
}
.quoteLeft {
position:relative;
top:40px;
padding:15px 25px 20px;
margin:20px auto;
font:italic 26px/1.4 Georgia, serif;
color:#fff;
background:rgba(34, 34, 34, .5);
}
.quoteLeft:after {
content:"";
position:absolute;
top:100%;
left:100%;
margin-top:-4px;
background:url(../images/box-line.png) no-repeat;
width:150px; height:165px;
}
.quoteRight {
position:relative;
top:150px;
padding:15px 25px 20px;
margin:20px auto;
font:italic 26px/1.4 Georgia, serif;
color:#fff;
background:rgba(34, 34, 34, .5);
}
.quoteRight:after {
content:"";
position:absolute;
top:100%;
right:80%;
margin-top:-4px;
background:url(../images/box-line-2.png) no-repeat;
width:300px; height:165px;
}
.credit {
margin:1em 0 0;
font:14px/1.2 Arial, sans-serif;
}
.credit:before {
content:"— ";
}
blockquote, p {padding:0; margin:0;}
.logo-second { position:absolute; margin-top:-20%; margin-left:11%;}
.logo-second h3 { font-size:56px;}
.quoteLeft:hover {And....}
I prefer any ideas css or jquery
Thanks
I think this is what you are looking for:
HTML
<div class="main">
<div class="first">First</div>
<div class="second">Second</div>
</div>
CSS
.main .first:hover ~ .second {
background-color: #f00;
}
I also made a jsFiddle
I have a website that I thought was OK, but apparently some people have issues with the text, and because of that I may have shot myself in the foot when it comes to showing off my portfolio to employers. The major problem is I'm not seeing what other people are seeing. Or, maybe they are seeing what I'm seeing, but it's just not designed well.
First of all, I would like you to check my website: http://mmking9999.com
After browsing around for a bit, please have a look at my code and tell me where I went wrong. If you have any other suggestions, let me know. Here's the code for the main page:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="http://mmking9999.com/css/style.css" />
</head>
<body>
<!--Site logo. Clicking on it will redirect to this page.-->
<div class="logo">
<img src="http://mmking9999.com/Images/SiteLogo.png" />
</div>
<!-- Menu window goes here. The text are images that link to other pages.-->
<div class="menu">
<img src="http://mmking9999.com/Images/MenuWindow.png" />
</div>
<div class="portfolio_url">
<img src="http://mmking9999.com/Images/portfoliourl.png" />
</div>
<div class="blog_url">
<img src="http://mmking9999.com/Images/blogurl.png" />
</div>
<div class="random_url">
<img src="http://mmking9999.com/Images/randomurl.png" />
</div>
<div class="email">
<img src="http://mmking9999.com/Images/emailicon.png" />
</div>
<div class="linkedin">
<img src="http://mmking9999.com/Images/linkedinicon.png" />
</div>
<div class="twitter">
<img src="http://mmking9999.com/Images/twittericon.png" />
</div>
<div class="window"><br><br><p>Welcome to my website! My name is Mike Murray, a rookie game developer/designer. Here, you'll find stuff about what I do and what I hope to become in the future. I am an avid gamer, and it was that passion that led me to want to create the video games that people like to play. Having played video games for over 20 years, I figure I should be able to create something cool with the knowledge I have!</p></div>
</body>
</html>
And here is the CSS I'm using:
/*The code for the body sets the default settings for all pages */
body
{
background-image:url('http://mmking9999.com/Images/sitewallpaper.png');
}
/* Link colours. I use bright colours to contrast the black window. */
a:link {
COLOR: #86C6FE;
}
a:visited {
COLOR: #FF0000;
}
a:hover {
COLOR: #FFFF00;
}
a:active {
COLOR: #00FF00;
}
/* Main window. Used to display text and images */
img
{
margin: 2px;
height: auto;
width: auto;
float: left;
}
h1
{
color:red;
text-align:center;
font-family:calibri;
}
p
{
/* font */
color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;
text-align:left; width:700px; margin-left:200px;
}
/* Main window. All info is displayed in here */
div.window
{
background-image:url('http://mmking9999.com/Images/IframeWindow.png');
background-repeat:no-repeat;
position:relative;
width:60%;
height:70%;
top:80px;
left:500px;
/*text*/
/*color:rgb(255,255,255);
font-family:"Small Fonts", calibri, arial, "Times New Roman";
font-size:18px;*/
}
/* Menu */
div.menu
{
position:relative;
width:40%;
height:10%;
}
/*Site logo */
div.logo
{
position:relative;
width:40%;
height:5%;
left:500px;
}
/*Images (so they aren't constrained by the attributes defined in div.window)*/
div.image
{
position:absolute;
left:20px;
}
/* In case I need another row of images */
div.image2
{
position:relative;
left:-150px;
width:90%;
height:90%;
}
/*Menu urls*/
div.portfolio_url
{
position:relative;
left:-175px;
top:30px;
}
div.blog_url
{
position:relative;
left:-305px;
top:90px;
}
div.random_url
{
position:relative;
left:-445px;
top:150px;
}
div.email
{
position:relative;
top:250px;
left:-600px;
}
div.linkedin
{
position:relative;
top:250px;
left:-580px;
}
div.twitter
{
position:relative;
top:250px;
left:-560px;
}
/*iframe
{
position:relative;
top:80px;
left:280px;
width:60%; height:70%;
}*/
Thanks for any advice you can provide.
http://d.pr/i/OhIF
Try using position:absolute rather than relative on your divs.
This is how my website looks in Google Chrome and nearly all browsers except some versions of IE.
This is how it looks in IE8, IE9 and probably in IE6.
The funny thing is that the website looks ABSOLUTELY ok in IE7. I want you to help me solve the problem, but I don't really know which data to server you, but if you ask, I can provide everything you need.
Here's the header code:
<div id="header">
<div id="headercont">
<div id="headerlogo">
<img src="<?php echo dir;?>css/images/headerbg.png" class="header" />
</div>
<div id="menu">
<div id="mpointshighlight">
<div id="menupoints">
<?php echo menuSpace; ?>
<div id="menumain">Main</div>
<?php echo menuSpace; ?>
<div id="menuabout">About</div>
<?php echo menuSpace; ?>
<div id="menublog">Blog</div>
<?php echo menuSpace; ?>
<div id="menuphotos">Photos</div>
<?php echo menuSpace; ?>
<div id="menuvideos">Videos</div>
<?php echo menuSpace; ?>
<div id="menumusic">Music</div>
<?php echo menuSpace; ?>
<div id="menuprojects">Projects</div>
</div>
</div>
</div>
</div>
</div>
Here's the header CSS:
#header {
background-color:#00a2ff;
background-image:url('images/menubg.png');
background-repeat:repeat-x;
background-position:bottom;
width:100%;
min-width:1100px;
height:243px;
}
#headercont {
margin:auto;
width:1100px;
}
#headerlogo {
margin:auto;
width:1000px;
}
#menu {
width:100%;
height:44px;
}
#menupoints {
position:relative;
width:1000px;
font-size:24px;
font-family:verdana;
height:44px;
}
#mpointshighlight {
margin:auto;
width:1000px;
margin-bottom:10px;
background-repeat:no-repeat;
}
#menupoints a:link {
color:white;
text-decoration:none;
text-shadow: black 2px 2px 3px;
}
#menupoints a:visited {
color:white;
text-decoration:none;
text-shadow: gray 2px 2px 3px;
}
#menupoints a:hover {
color:white;
text-decoration:none;
text-shadow: black 2px 2px 3px, white 0 0 1em;
}
#menupoints a:active {
}
#menumain {
display:inline
}
#menuabout {
display:inline
}
#menublog {
display:inline
}
#menuphotos {
display:inline
}
#menuvideos {
display:inline
}
#menumusic {
display:inline
}
#menuprojects {
display:inline
}
Hard to be certain what the problem is without going into depth, but something that might help is to look into compatibility modes in IE:
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
Specifically, tell IE8 and higher to emulate IE7:
Ensure this is the first HTML tag in the head.
As for IE6, depending on your target audience, you might be able to get away with ignoring it, otherwise it's a trawl through CSS I'm afraid!