I'm designing a website and I need it to look something like this http://www.spookycraft.net/
excluding the slide show and javascript and such, I just need 4 separate clickable blocks in the middle of a webpage, I've tried to use margin:auto and then re-position it using margin-left and margin-bottom ect but when I use margin-bottom It just splits apart more and acts rather interestingly here's my current code keep in mind I also need it to look the same on a higher resolution screen which is why I was attempting to use margin:auto;
<!DOCTYPE HTML>
<html>
<head>
<table border="10px"; class="head">
<tr>
<td>
<img src="http://www3.alcatel-lucent.com/partners/hp/data-center-network-connect/images/Alliance_DCNC_700x200.jpg" > </>
</td>
<tr>
</table>
<style media="screen" type="text/css">
.tone{
margin:auto;
}
.ttwo{
margin:auto;
}
.tthree{
margin:auto;
}
.tfour{
margin:auto;
}
.head{
margin:auto;
}
</style>
</head>
<body>
<table border="5px"; class="tone">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px"; class="ttwo">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tthree">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tfour">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
</body>
</html>
Any help would be appreciated! I'll be working to find a answer to my problem, and when I do I'll update this thread.
Don't use tables, they are a no-no in my books. Tables should not be used for structure in a HTML page these days, they should only be used for presenting data in a tabular format. Just use <div>s with a master wrapper <div> around them. Something like this is perfect:
HTML:
<div class="container">
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
</div>
CSS:
body{
margin:0;
padding:0;
}
.container{
overflow:hidden;
width:450px;
margin:0px auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
}
.spacing{
margin-right:20px;
}
Demo here: http://jsfiddle.net/aRSNh/172/
I'm not familiar with table design, but if you want to build it with div I have my code here
<div class="container">
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
</div>
with this css
.container {
width: 680px;
margin: 10px auto;
}
.box {
float: left;
margin: 20px;
}
A nice library for fast CSS development is Twitter bootstrap http://twitter.github.io/bootstrap/index.html
Here is a quick example using bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Layout Demo</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap- combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="margin: 100px 0px; 0px; 0px;">
<div class="row">
<div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
<div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
</div>
<br>
<div class="row">
<div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
<div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
</div>
</div>
</body>
</html>
Plunker: http://embed.plnkr.co/iKgsmZ/preview
Related
I'm using bulma.css for a layout, but when I give a border to something I've found its overlapping.
Here is the overlap:
The .shop div seems 'as expected'
But the .basket div seems to be creeping up a bit.
Here is a link to a demo
And Html:
<div id="app">
<div class="container">
<div class="shop">
<div class="columns">
<div class="column is-one-quarter product">
<h3 class="title is-4">Cat</h3>
<p>
£<span>2.99</span></p>
<div><button class="button">Add to basket</button></div>
</div>
<div class="column is-one-quarter product">
<h3 class="title is-4">Dog</h3>
<p>
£<span>4.00</span></p>
<div><button class="button">Add to basket</button></div>
</div>
</div>
</div>
<div class="basket">
<h1>Basket</h1>
<table class="table">
<thead>
<tr>
<td>Item</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">No items in the basket</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
// All of bulma.css
html,body{
height:100%;
padding:20px;
}
.product{
box-sizing:border-box;
border:2px solid #eaeaea;
padding:20px;
}
I think its something to do with ... flexbox? I'm not sure!
In it's latest version try is-gapless along with columns class
The bottom container is creeping up over the top container because of this rule in the Bulma code:
.columns:last-child {
margin-bottom: -.75rem;
}
Just override it. Add this to your code:
.columns:last-child {
margin-bottom: 0 !important;
}
!important may not be necessary. I just added it to ensure that your rule prevails.
The last images and the text is not properly aligned. Here's the code:
<html>
<head>
<title>PODAR Ahmedabad!</title>
</head>
<body bgcolor="BFFFC2">
<div id="main">
<hr size="7">
<div id="header">
<div align="left">
<img src="podar.jpg" width="25%" height="20%">
</div>
<h1 align="center"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1>
<div align="right">
<img src="school.jpg" width="25%" height="20%">
</div>
</div>
<hr size="7">
</div>
</body>
dimension of the first image is 300*105 and second image is 244*244
Use css inline
<div style="display:inline">
<img src="podar.jpg" width="25%" height="20%">
</div>
<h1 style="display:inline"><font size="7"><font face="Papyrus">Welcome to </font><b><font color="34C510" face="SketchFlow Print"> PODAR </font></b><font face="Papyrus"> ahmedabad!</font></font></h1>
<div style="display:inline">
<img src="school.jpg" width="25%" height="20%">
</div>
Not: Do not use font tags.. And must embeded fonts in site;
visit : https://www.google.com/fonts
example : adding in head tags for Shadows Into Light font :
https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<html>
<head>
<title>PODAR Ahmedabad!</title>
<style>
#main {
display: block;
width: auto;
}
.fontPapyrus{
font-family:"Papyrus";
}
.fontSize36{
font-size:48px;
}
.fontBold{
font-weight: bold;
}
.colorGreen{
color:#34C510;
}
.fontSketchFlowPrint{
font-familiy:"SketchFlow Print";
}
.inlineBlock{
display:inline-block;
}
.verticalAlignMiddle{
vertical-align: middle;
}
</style>
</head>
<body bgcolor="BFFFC2">
<div id="main">
<hr size="7">
<div id="header">
<div class="inlineBlock verticalAlignMiddle">
<img src="podar.jpg" width="25%" height="20%" valign="top">
</div>
<h1 align="center" class="inlineBlock verticalAlignMiddle">
<span class="fontSize36 fontPapyrus">Welcome to
<span class="fontBold colorGreen fontSketchFlowPrint">PODAR</span>
</span>
<span class="fontPapyrus">ahmedabad!</span>
</h1>
<div align="right" class="inlineBlock verticalAlignMiddle">
<img src="school.jpg" width="25%" height="20%" valign="top">
</div>
</div>
</div>
</body>
It is because there isn't enough space, so either add space to the element that contains the 3 things or make those smaller. With space I'm talking about Width.
I know there are lots of ways to center content with an unknown width on a fluid width page in HTML/CSS but I can't get them to work in this case for some reason and need help.
Firstly, let me state that I need a solution that works in common browsers and in IE6 (don't ask why).
Here's an example of markup and the problem. In this example I want the yellow boxes centered inside the blue box.
example on jsfiddle.net
<div style="background:blue;margin:0 auto;width:100%;">
<table style="margin:0 auto;">
<tr>
<td>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<td>
</tr>
</table>
</div>
I tried this method using a table but I also tried the -50% +50% method. I am happy to use any method that works on all common browsers and IE6.
Can someone help me fix it.
Please do not lecture me on IE6 or incorrect use of the TABLE tag.
Try this,
<tr>
<td>
<div style="width: 379px;">
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
<div style="background:yellow;float:left;padding:50px;">Test</div>
</div>
</td>
</tr>
what I understood from your requirement that you want to make your div to center ? then please have a look on the below code
<style type="text/css">
.yourclass
{
background:yellow;
float:left;
padding:50px;
}
.blueback
{
background:blue;
}
.mytable
{
width: auto;
margin-left: auto;
margin-right: auto;
}
div.clear
{
clear:both;
}
</style>
<div class="blueback">
<table class="mytable">
<tr>
<td>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="clear"></div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
<div class="yourclass">Test</div>
</td>
</tr>
</table>
Hope it helps...
After lots of research I can find no solution to this that works in all browsers and doesn't require IE6 hacks.
The best solution is display:inline-block and IE6/7 and various other hacks (eg. FF2).
The final solution taken from here is as follows:
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</div>
</li>
CSS is my weak side and now I'm trying to improve it, can you please help me to spot what's the problem is, moreover which css style I'm missing.
<table>
<tr>
<td style=width:"177px; height:92px"><img src="logo.png"></td>
<td rowspan="2"><img src="img2.png"></td>
</tr>
<tr>
<td style=width:"177px; height:100px"><img src="img1.png"></td>
</tr>
</tr>
</table>
UPDATE:
I forgot to mention that I was doing HTML email so solved my issue. Thanks for your help
I think you just need to make the table default CellSpacing and CellPadding 0 (assuming the top picture in your post is the desired result)
<table cellpadding=0 cellspacing=0 >
Although DIV's may be easier
<div>
<div style = width:"177px; height:92px; float:left;">
<img src="logo.png"><br />
<img src="img2.png">
</div>
<div style=width:"177px; height:100px; float:left;">
<img src="img1.png">
</div>
</div>
Then, let's take it 1 step further
<style>
.wrapper
{
background-color:#ccc;
padding:5px;
}
.content
{
width:177px;
height:100px; /*Made them both 100px although one was 92px, this may not be correct*/
float:left;
}
</style>
<div class="wrapper">
<div class="content">
<img src="logo.png"><br />
<img src="img2.png">
</div><!--/content-->
<div class="content">
<img src="img1.png">
</div><!--/content-->
</div><!--/wrapper-->
The property you are looking for may be border-spacing, E.G. border-spacing: 0; (other table specific CSS properties) however you may wish to consult this topic first: Why not use tables for layout in HTML?
Try This one:
css
table {border:1px solid #ccc;
.logo{ width:100px; }.img2{ width:300px }
HTML
<table cellpadding="0" cellspacing="0">
<tr>
<td class="logo">
<img src="logo.png" /><br />
<img src="img1.png">
</td>
<td class="img2"><img src="img2.png"></td>
</tr>
</table>
height is the problem. Decrease the height of logo.png image.
I'm trying to figure out why my <div> element does not expand to cover everything it contains. I've seen this in Google Chrome's "Elements" view when I press Shift+Ctrl+J. I expected my "content" div to be sized to include <p>A</p> and <p>B</p>, but it doesn't.
PS-- I've read some comments that a footer is normally positioned absolute, but this is just to show the error.
Here is the simplified page:
<html>
<head>
<style type="text/css">
#footer{
background-color: lightblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div style="width:50%;">
<p align="left">
Two divs:
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
</p>
</div>
</div>
<div id="footer" align="center">
<div style="width:90%;" align="center">
Here is my footer.
</div>
</div>
</body>
</html>
Add
<div style="clear:both"></div>
After
<div style="width:80%; float:left;"><p>A</p></div>
<div style="width:20%; float:right;"><p>B</p></div>
add this to the css:
#content { overflow: hidden; }