Trying to get the text beneath the "Menu" (as in Picture 2) . What is the 'correct' way to do this? I have been playing around with the meniubot and textbox margins, padding, display:block, display:inline-block, float:left, clear:both but I can't get it properly aligned as seen in the second picture.
Any ideas? Maybe I should be using a different class for each text box and set custom margins?
What I have:
What it has to look like:
HTML:
<div id="footer">
<div class="main">
<div class="logo2">
<img src="logo2small.png">
</div>
<div class="meniubot">
naujienos
krepšinio vadovas
treniruotė
įdomybės
galerija
apie mus
</div>
<div class="ytfb2">
<img src="yttopedit.png">
<img src="ftopedit.png">
</div>
<div class="textbox">
Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> Designed for basketball
</div>
<div class="textbox">
Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br>
</div>
<div class="textbox">
Wondering <br> how we can he <br> Ip your game <br> Basketball HQ <br> Lomprehensive <br> Resource <br> Desiasketball coach
</div>
<div class="textbox">
Wondering <br> how we can he <br> Ip your game <br> Basketball HQ
</div>
</div>
</div>
</body>
</html>
CSS:
#footer{
bottom:0px;
background-image:url(meniuBG.jpg);
height:252px;
margin-top:220px;
}
.logo2{
float:left;
margin-top:35px;
}
.ytfb2{
clear:both;
}
.ytfb2 a{
float:left;
margin-top:40px;
margin-right:20px;
}
.meniubot{
float:left;
margin-left:15px;
margin-top:40px;
}
.meniubot a{
text-align: center;
float:left;
text-decoration: none;
font-style:italic;
color:rgb(193,193,193);
padding:0px 35px 0px 35px;
text-transform:uppercase;
}
.textbox {
float:left;
margin-left:50px;
margin-top:-20px;
color:rgb(193,193,193);
font-size:14;
}
I don't want to go into deepest coding practice.
Use position:relative; display: block; to whatever contents you want to play with.
It won't affect any other tags.
Using a list might help you.
<ul class="meniubot">
<li>
Link
<div>text...</div>
</li>
</ul>
See fiddle: http://jsfiddle.net/ECd6J/
Replace all the text box like the following:
<html>
<div class="container">
<p>Wondering </p>
<ul class="textbox">
<li>How we can he</li>
<li>Ip your game</li>
<li>Basketball HQ</li>
</ul>
</div>
</html>
And change the CSS like the following:
.container{
width:200px;
}
.container p{
margin-left:40px;
font-weight:bold;
}
.textbox li{
list-style-type:none;
}
Related
I am trying to design a front-end with HTML and CSS, I am unable to use the div and style them with CSS to have a look like below format.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.students-page-container{
display: flex;
align-items:center;
justify-content:space-between;
}
.label-style{
font-weight:600;
font-family:'sans-serif';
font-size:24px;
align-items: center;
color: black;
margin-left:2rem;
line-height:28.8px;
display:flex;
}
.button-style{
border:none;
background:none;
padding:none;
font-weight:400;
size:12px;
line-height:14.4px;
}
.box-design{
width: 100 %;
background-color: gray;
}
.child-one{
width: 50%
min-height"400px;
background-color:white;
float:left;
}
.child-two{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
.child-three{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
</style>
</head>
<body>
<!-- Top Row Container-->
<div class="students-page-container">
<div class="label-style">
<span> student number: 92837293</span>
</div>
<div>
<button class="button-style">
<u> all students</u>
</button>
</div>
</div>
<!-- for the boxes -->
<div class="box-design">
<div class="child-one">
<p> Studnt Name: mike jordan</p>
....
...
...
..
<hr>
<p></p>
</div>
<div class="child-two">
<p> Alerts</p>
</div>
<div class="child-three">
<p> Contact Details</p>
</div>
</div>
</body>
</html>
I am able to display first row student number with a link to all students in the correct format. But as soon as i am trying to write other div elements for boxes and setting min-height. the box is overriding the exiting top and header of the page.
I am quite new to front-end and learning .any help would be greatly appreciated
Expecting how to achieve the Layout which is high-lighted with red box
I've have the horizontal line start a third way through the webpage, but getting the line to move down a bit (maybe 200-400px?) is giving me a real pain. And whenever i try to use "top:-200px;" within the style element (midline) it just makes half of the line disappear
<html>
<header>
<style>
.divider{
position:absolute;
left:33.3%;
top:0%;
bottom:0%;
border-left:5px solid black;
}
.divider2{
position:absolute;
left:66.6%;
top:0%;
bottom:0%;
border-left:5px solid black;
}
#left {
width:380px;
float:left;
margin-left: 100px
}
#middle {
width:380px;
float:right;
text-align:center;
margin-right: 300px
}
#right {
width:380px;
float:right;
margin-left: 40px
}
#midline{
position:relative;
left:530px;
width:1265px;
height:5px;
background: black;
}
</style>
</header>
<body style="background-image: url(https://www.planwallpaper.com/static/images/Cool-Wallpapers-Background-HD-Wallpaper.jpg);" >
<div id="left">
<font color="white">
<p>
<h1> Greetings!</h1>
</p>
<font size="6", color="white">
<h3>Welcome to my world ;D </h3>
<p>
Heres a little information about me
</p>
<p>
A photo of me VV
</p>
<div id="midline"></div>
<p>
<a href="https://www.facebook.com/shan.kulkarni.9">
<img src=file:///C:/Users/shank/Desktop/Website/02f8a12b-3edf-4a4f-981c-860f7c7c3b07.jpg Width="350" height="500" />
</a>
<p>
Click on it and you'll go to my Facebook
</p>
<p>
Follow me on instagram while you're at it ;o
</p>
</div>
<div class="divider2"></div>
<div id="right">
<h2> My Hobbies </h2>
</div>
<div class="divider"></div>
<div id="middle">
<h2> Favorite Quotes</h2>
</div>
</font>
</body>
</html>
Here is the code:
https://jsfiddle.net/fjzcwfyx/
Leave out the bottom setting and set top: 200px; (not minus, but plus - that's the distance to the top). BTW: top AND bottom in one rule is too much, one of them is sufficient.
I have two <img> and two <p> (basic caption text)
I want to format them in css to line up like this:
<img1> <img2>
<text1> <text2>
basically, two images with two captions under them.
I know this is fairly simple, but everything I have tried has not worked.
This is pretty basic stuff:
HTML
<div>
<img src="http://www.placekitten.com/100/100" />
<p>Text</p>
</div>
<div>
<img src="http://www.placekitten.com/100/100" />
<p>Text</p>
</div>
CSS
div {
float:left;
text-align:center;
margin:20px;
}
jsFiddle example
Essentially you wrap your image/text pairs in divs and float the divs left.
You can do it with this way basically:
HTML
<ul class="images">
<li>
<img src="/path/to/img1" /><br/>
<p>Your caption here</p>
</li>
<li>
<img src="/path/to/img2" /><br/>
<p>Your caption here</p>
</li>
</ul>
CSS
.images{
list-style-type:none;
}
.images li{
float:left;
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.img-caption
{
float:left;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div class="img-caption">
<img src="image-name.gif" width="95" height="84" alt="" /><br>
CSS is fun!
</div>
<div class="img-caption">
<img src="image-name.gif" width="95" height="84" /><br>
CSS is fun!
</div>
</body>
</html>
Hello everyone my div area height is displayed different with these browsers: Firefox and Internet Explorer. In Chrome and Safari my div area looks fine could you help me please.
Here is my div area
.openmeclis
{
position:relative;
margin-left:4px;
background:#66B3E3;
width:90px;
height:370px;
display:inline-block;
overflow:hidden;
}
Here is a caps what I mean
This is from Firefox
Here is from Chrome
<div id="subMenu">
<div class="openbaskan" style="float:left">
Başkandan <br />
Özgeçmişi <br />
Haberler <br />
Videolar <br />
Fotoğraf Galerisi
</div>
<div class="openmeclis" style="float:left">
Meclis Üyeleri <br />
Meclis Gündemi <br />
Meclis Kararları <br />
</div>
</div>
CSS:
#subMenu
{
width:964px;
margin-left:auto;
margin-right:auto;
display:none;
font-size:14px;
font-style:normal;
height:336px;
font-family: 'Museo300Regular';
}
Just use line-height to your css. Because every browser renders different line-height,that's why your div is showing problem with different browsers.
Here is the link for the same problem that you have asked
FireFox 3 line-height
CSS line-height issue across browsers
Check this edited answer
Edited Demo
Note the edited CSS below:
.openmeclis
{
position:relative;
margin-left:4px;
background:#66B3E3;
width:90px;
height:370px;
overflow:hidden;
float: left;
list-style: none;
}
#subMenu {
width:964px;
margin-left:auto;
margin-right:auto;
font-size:14px;
font-style:normal;
height:336px;
}
HTML:
----------
<div id="subMenu">
<div class="openmeclis">
<ul>
<li>Başkandan</li>
<li>Özgeçmişi</li>
<li>Haberler</li>
<li>Videolar</li>
<li>Fotoğraf Galerisi</li>
</ul>
</div>
<div class="openmeclis">
<ul>
<li>Meclis Üyeleri</li>
<li>Meclis Gündemi</li>
<li>Gündemi</li>
<li>Meclis Kararları</li>
</ul>
</div>
</div>
Do not add unnecessarily <br/> tag. Instead of that you can use the <ul> methods. You do not need to add style tags in your html when you have the CSS. I don't know what you add in the #sub menu... I just edited the HTML and CSS for openmeclis
I want to make two columns page with box one (box1) and box two(box2). Then just after h2, I want to make two columns inside box2 with box2.1 and box2.2.
Here is my HTML code
<body>
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
</body>
And here is my CSS part.
#contentLeft{
float:left;
width:300px;
After that, I have no idea what to do. Tried number of ways, it didn't work. Could you please help here?
It may help you:
HTML:
<div id="box1">
<h1>Here is the box one.</h2>
</div>
<div id="box2">
<h2>Here is the box two.</h2>
<div id="box21">
<p>Here is the box2.1</p>
</div>
<div id="box22">
<p>Here is box 2.2</p>
</div>
</div>
CSS:
#box1{
float:left;
widht:50%;
background:#FF0000;
}
#box2{
float:left;
width:50%;
background:#00FF00;
}
#box21{
float:left;
width:50%;
background:#0000FF;
}
#box22{
float:left;
width:50%;
background:#e4e4e4;
}
Just for your reminder, don't use dot(.) in id or class name. You can also simplified the CSS by using the same class name in all div.
.box{
float:left;
width:50%;
}
OR the following code:
#box1, #box2, #box21, #box22{
float:left;
width:50%;
}
See the example : http://jsfiddle.net/N4hMw/2/