I have a jquery ui calender that i have placed at left of the page.After calender i have placed second div which is taking full width of the web page.Now i want to add one more div just below the calender but its coming after the second div ..
Here is the link of the image ..
Please see the web page
Here is my HTML..
<div id="datepicker" style="float:left;"></div>
<div id="main" style="float: left; width:83%; margin-left:5px; margin-top:0px;">
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
</div>
<div id="links" style="float:left; margin-left:0px">
<label name="roomOperation" id="roomOperation" style="font-style:normal; font-size:12px;font-weight:bold;"> Room Operation </label>
<br/><br/>
<li>Check in List</li>
<br/>
<li>Check out List</li>
<br/>
</div>
Why is this happening..
Please help me to remove the margin between calender and my hyperlink menu..
If you use position: absolute; on the #links div, and set the CSS top: ; value to the same height as your calendar, plus whatever you want as a gap between the two, say 5px, and the left: 0px; this should work.
You'll also need to surround all 3 divs with a containing div with CSS position: relative to make the absolute positioned div keep within the boundaries of the area you want it to be in.
I also believe you could use float: right; on the documents div and float: left; on the other two, but I'm not 100% sure on this, it's worth a try though.
Related
I'm creating a custom landing page for my employers website.
http://juniorgoldreport.com/welcome/ this is the landing page.
I'm just trying throw some idea's until we find something solid, so at the moment the landing page is extremely simple.
I'm having trouble splitting my body into two different div blocks.
<div class="welcome-landing">
<div class="landing-header">
<div class="logo-img">
<img src="http://juniorgoldreport.com/wp-content/uploads/2016/05/logoo2.png" alt="junior gold report logo" />
</div>
</div>
<div class="landing-bar">
<ul class="landing-nav">
<li> About Us </li>
<li> Accredited Investors </li>
</ul>
</div>
<div class="landing-body">
<div class="body-left">
[layerslider id="11"]
</div>
<div class="body-right">
TEST BLOCK
</div>
</div>
<div class="landing-footer">
FOOTER TEST
</div>
</div>
Where you see the "TEST BLOCK" is the block I'm having trouble with. I have a subscribe button in there right now when you look at it in the website.
Remove any character between two horizontal Divs
<div class="landing-body">
<div class="body-left">
//content here
</div><div class="body-right"> <-- </div><div> No character in between
//content here
</div>
</div>
add following css
.body-left, .body-right {
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
You need to use
1) float:left
or
2) display:inline-block
for both blocks
http://c2n.me/3yr3jOw
I'd make this a comment but I don't have enough points.
Try adding float: left; to your CSS for the .body-left div, and float: right; to .body-right.
Also, your <footer> tag should include clear: both;.
There's a lot more to be taken care of here, but this should get you on the right path.
I'm creating a website and I want each section to take up the full screen. I have:
html, body {
height: 100%;
width: 100%;
margin: 0;
}
and each section has 100% height and width and relative position. Inside the second section, I want to create four divs that take up each corner. They share a class which has height and width 50% and absolute position. I tried to position them individually by selecting each id and giving them top:0 left:0, top:0 right: 0, and so on.
The problem is, the left and right positioning works, but when I try to position the top or bottom, the div will go to the top or bottom of the first section instead of the second. I think it might be an issue with having two 100% divs on top of each other, but I'm not sure. Would really appreciate any advice!
After see your fiddle, i see you wrote wrong the word "position" in class ".work", beside you can add an div clear between two divs ".hero" and ".work", it will work
<!--==== HEADER =============================================-->
<div class="header">
<div class="container">
<ul>
<li>Home</li><!--
--><li>Work</li><!--
--><li>About</li><!--
--><li>Contact</li>
</ul>
</div><!-- container -->
</div><!-- header -->
<!--===== HERO =============================================-->
<div class='hero' data-type="background" data-speed="10">
<div class='name'>
<h1>kdjfkd</h1>
<h2>fdasfdr</h2>
<h2><span >fgafd</span></h2>
</div>
</div><!-- hero -->
<div style="clear:both"></div>
<!-- ============= WORK ================== -->
<div class='work'>
<div class="same2" style="background-color:red; top:0;left:0"></div>
<div class="same2" style="background-color:yellow; top:0;right:0"></div>
<div class="same2" style="background-color:white; bottom:0;left:0"></div>
<div class="same2"style="background-color:green; bottom:0;right:0"></div>
</div>
.work{
height: 100%;
width: 100%;
position: relative;
}
Demo
Edit: not need "clear:both" at all, it still work fine
I have a simple web page with a navbar and some content.
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a id="about" href="#first">First section</a></li>
<li><a id="about" href="#second">Second section</a></li>
</ul>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
<img alt="this should be my image" />
<h3 id="first">The first section</h3>
<p>... content ...</p>
<h3 id="second">The second section</h3>
<p>... content ...</p>
</div>
</div>
</div>
The navbar links to sections in the same page. Whenever a link is clicked, the page scrolls to the targeted element but the content gets overlapped by the navbar. Concretely, if the link to the first section is clicked (First) the page gets scrolled to the first h3 element, but the element is actually rendered under the navbar element How can this be fixed? See fiddle for details -- decrease the height of the results panel to better see the problem.
A CSS only solution would be to add padding to the h3 id and a negative margin to remove the redundant whitespace. For example:
#first, #second {
padding-top: 200px;
margin-top: -200px;
}
See my JSFiddle here.
I'm coming from using Dreamweaver, and i would to have 2 fluid divs side by side. In Dreamweaver, you would create the two divs (they would automatically align on top of each other), then you resize them to the grid, and click "move up a row".
Of course, in pure code applications like Brackets there is no visual editor with a button to click "move up a row".
My problem is that when i expand the page, the 2nd div (it doesn't matter about the content, only the second div [out of the two] in the code) will keep moving when the page is resized, as opposed to staying proportional.
Does anyone have any ideas?
Thanks
These are the two divs in quesiton
<div id="soundcloud" class="fluid">
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/2744486&color=ff6600&auto_play=false&show_artwork=true"></iframe>
</div><!-- end soundcloud -->
<div id="content" class="fluid">
<div id="tabs">
<!--TABS-->
<ul>
<li>About</li>
<li>Testemonials</li>
<li>Contact</li>
</ul>
<!--TAB CONTENT-->
<div id="tabs-1">
</div><!-- END TAB 1-->
<div id="tabs-2">
</div><!-- END TAB 2-->
<div id="tabs-3">
</div><!-- END TAB 3-->
</div><!--END TABS-->
</div> <!-- end content -->
Firstly (and I speak from experience), stop using Dreamweaver. WYSIWYG editors do you no favors in terms of web development, and generally lead to unmaintainable, dirty code. You're better off writing HTML/CSS by hand and testing in your target browsers (FireFox, Chrome, IE etc).
Here is some code that will give you two fluid divs, side by side:
HTML
<div class="row">
<!-- .row > div is applied here because this div is an immediate child of the parent-->
<div class="first">
<p>First fluid section</p>
</div>
<!-- .row > div is applied here because this div is an immediate child of the parent-->
<div class="second">
<p>Second fluid section</p>
</div>
</div>
CSS
/* Apply this style to the parent div */
.row {
display: block;
width: 100%;
}
/* Apply this style to the immediate div children of the parent */
.row > div {
float: left;
display: inline-block;
width: 50%;
}
.first {
background: #FF0000;
}
.second {
background: #0000FF;
}
jsFiddle: http://jsfiddle.net/q9JpH/
Make sure you test thoroughly and apply graceful degradation where necessary...compatibility in the browser world is savage!
Is it possible to create a fluid width LI with background imaage that adjusts its size based on content and doesn't follow the width of a parent DIV.
If possible, using only CSS.
<div id="navbody">
<!--Button Start-->
<ul id="button">
<li>
Home
<div class="btnright"></div>
</li>
<li>
About Us
<div class="btnright"></div>
</li>
</ul>
<!--Button End-->
</div>
LI contains a background:
NOTE: this has an irregular left shape
Then a DIV is used to end the irregular right shape
The menu is contained in a parent div with a fixed width
[ ]
[[ Home ] [ About Us ] ]
As you can see, I want the LI's to auto adjust based on content.
Oh. I didn't understand your question properly until you posted the code sample.
Here's a mock-up:
<div style="width: 500px;border: 1px solid Blue;">
<ul style="padding-left:0;margin-left:0;">
<li style="list-style-type: none;">
<div style="float:left; height:24px;width:20px;background-color:Green;"></div>
<div style="float:left;height:24px;background-color:Yellow;">Some content here</div>
<div style="float:left; height:24px;width:20px;background-color:Red;"></div>
<div style="clear:both;">
</li>
<li style="list-style-type: none;">
<div style="float:left; height:24px;width:20px;background-color:Green;"></div>
<div style="float:left;height:24px;background-color:Yellow;">Some other content here</div>
<div style="float:left; height:24px;width:20px;background-color:Red;"></div>
<div style="clear:both;">
</li>
</ul>
</div>
The green div is your left part of the image, the red one is your right part of the image and the yellow one is your repeating center of the image. To do this you should slice your image into these 3 parts and add them as backgrounds for the 3 divs. Just fiddle with the dimension to make it suite your desired output.
Hope this helps,
Alin