I am creating an interface and I am unable to figure out as to why there is a huge gap between the names on the left side being displayed.
I have not set any kind of padding or any margin for any of the html elements.
I need the three blocks displayed to come within the specified height and not exceed its contents.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.jumbotron {
padding: 0.5em 0.6em;
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
.btn {
padding: 0.5em;
}
}
}
.menuItem {
background-color: #e0e0ff;
width:295px;
height:183px;
border:2px solid #000;
}
.fontSize {
color: #00000;
font-family: Georgia, Times, serif;
font-size: 200%;
text-align: center;
}
.menuItem:hover { -moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc; box-shadow: 0 0 50px #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2 style="text-align:center;">Head And Neck Therapy </h2>
</div>
<div style="width:1140px; height: 550px;border:2px solid #000;">
<div style="width:300px; height: 550px;display: inline-block">
<div class="menuItem fontSize"> Scan Images </div>
<div class="menuItem fontSize"> Patient Details </div>
<div class="menuItem fontSize"> Confirmation </div>
</div>
<div style="width:832px; height: 548px;display: inline-block"> </div>
</div>
</div>
</body>
Check out the following URL with the modified code. It might be what you're looking for. http://liveweave.com/Ci6YPG
Try wrapping the menu items in a float left div:
<div style="width:1140px; height: 550px;border:2px solid #000; background-color: blue">
<div style="float: left">
<div style="width:300px; height: 550px;display: inline-block; background-color: red">
<div class="menuItem fontSize"> Scan Images </div>
<div class="menuItem fontSize"> Patient Details </div>
<div class="menuItem fontSize"> Confirmation </div>
</div>
</div>
<div style="width:832px; height: 548px;display: inline-block; background-color: green">
</div>
</div>
You have your menuItem elements set to display: inline-block. That's positioning them based on the line-height which you're not setting and would end up being 20px. Try using display: block or set the line-height equal to the container's height.
Try removing the .menuItem height and div style="width:1140px; height: 550px;". You will get the spaces removed and then accordingly you can give width and height.
Related
No matter what I do, when resizing the screen or going on mobile, everything overlaps each other and images size down when they aren't supposed to.
Here is what the navigation bar looks like when resized:
Here is how it is supposed to be:
I did find a potential solution with the text, but it isn't exactly the solution I want. Especially with position: relative, which, for me, is hard to deal with since, no matter where you move your divs, it still processes it as being where it originally was. That is why I usually work with absolutes. So, if there is an alternative solution for that, it would be greatly appreciated. :)
What I am having a problem with at the moment is the image. If I do position: relative it resizes it when you change the browser size. I figured out a way to make it stabilize when it is absolute, but it still overlaps with other media when the browser is resized.
I have tried #media, (which for some reason breaks the whole browser, makes something disappear, or doesn't work,) overflow: hidden/auto, margins, paddings, indexes, max-width, max-height, ect. I can't seem to find a solution, though.
Here is the html and css code.
.nav-bar-links a {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: #fff;
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
color: 6s;
}
.nav-bar-links a:hover {
font-family: 'Oswald', sans-serif;
text-decoration: none;
text-transform: uppercase;
color: rgb(253, 253, 159);
z-index: 1;
position: relative;
float: right;
margin: 35px 35px 35px 35px;
transition: color 0.6s;
}
.nav-logo img {
position: absolute;
max-width: 25%;
max-height: 20%;
z-index: 1;
float: left;
margin: 0x 20px 20px 20px;
padding: 0;
}
.nav-text-link a {
text-transform: uppercase;
text-decoration: none;
position: relative;
padding: 0px 20px;
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: bold;
font-size: 50px;
float: left;
z-index: 1;
top: 10px;
left: 12%;
color: 6s;
}
.nav-text-link a:hover {
color: rgb(253, 253, 159);
color: 6s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="nav-bar-wrapper">
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="nav-logo">
<img src="/image.png">
</div>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
Thank you!
You haven't told us what you want to achieve exactly, but first step is to remove everything that makes the image behave weirdly, notably negative margin, float and position. Try to avoid these things as much as possible.
If you want to put columns or elements next to each other, you should use flex declarations on the parent element, the div that wraps the elements you want to arrange. Note that I moved your container-fluid out so it wraps everything. Not good to nest multiple containers inside one another.
Let me know where we want to take this from here (see, no overlapping!):
* { box-sizing: border-box;
margin: 0;
padding: 0;
}
.nav-logo img {
width: 100%;
margin-top: 2rem;
}
.nav-bar-wrapper {
padding: 1rem 2%;
display: flex;
align-items: center;
justify-content: space-between;
background: pink;
}
.nav-bar-links {
display: flex;
justify-content: space-between;
width: 60%;
}
.container-fluid {
max-width: 1400px;
}
.row {
margin: 0 4%; /* margin on each side of content */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="nav-bar-wrapper">
<div class="logo"><h1>LOGO</h1></div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="row">
<div class="column nav-logo">
<img src="https://wallpapercave.com/wp/ylvyN1V.jpg" alt="National park" title="National Park">
</div>
</div>
<div class="row">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container-fluid">
<div class="bg-color">
Color
</div>
<div class="row">
<div class="`nav-bar-wrapper`">
<div class="nav-logo">
<img src="/image.png">
</div>
<div class="nav-bar-links">
<a class="about-us" href="About Us"> About Us </a>
<a class="our-services" href="Our Services"> Our Services </a>
<a class="reviews" href="Reviews"> Reviews </a>
<a class="contact-us" href="Contact Us"> Contact Us </a>
</div>
</div>
<div class="container">
<div class="nav-text-link">
Viju
</div>
</div>
</div>
</div>
</body>
add this css
.nav-bar-wrapper{
display:flex;
justfy-contant:space-between;
}
donot use any asolute positioning that is what is causing it to overlap
My h1 tag shifts the entire div down when I have 2 or more divs next to each other enclosed in another div.
How do I make it so that I can add my text without the divs shifting.
I tried to add text onto a single div enclosed by another div and it only seems to be wrong when there are 2 or more divs next to each other inside a div. Any help is appreciated. This is how it looks like right now but
This is how I want it to look but with the text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="positioningTrial.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="seperate">
<div class="inside">
<h1>hello</h1>
</div>
<div class="inside">
</div>
</div>
<!-- ------------------------------------------------------------------------------------------- -->
<div id="main-cont">
<div class="row">
<div class="left">
<h1>hello</h1>
</div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>
h1,
p {
padding: 0;
margin: 0;
}
#seperate {
border: 1px solid red;
height: 10vw;
width: 400px;
text-align: center;
margin-bottom: 5px;
}
.inside {
display: inline-block;
border: 1px solid red;
height: 100%;
width: 40%;
}
/* ---------------------------------------------- */
#main-cont {
width: 100vw;
height: 100vh;
border: 3px solid blue;
text-align: center;
}
.row {
width: 100%;
height: 20%;
border: 3px solid #ff0000;
}
.left,
.middle,
.right {
display: inline-block;
width: 20%;
height: 100%;
border: 2px solid black;
}
.left {
}
.middle {
width: 40%;
}
.right {
}
/* --------------------------------------------- */
[1]: https://i.stack.imgur.com/nGHtm.jpg
I think there might be some crossed wires with how the page layout works.
Can you make a simplified version in jsFiddle like this: https://jsfiddle.net/sheriffderek/hupdmg3q/ or something?
It's hard to tell what you want to happen from the image you provide.
How do I make it so that I can add my text without the divs shifting
All of the block-level elements are just full-width boxes:
<header>
<h1>Heading example</h1>
<div>Example div</div>
</header>
So, their existence takes up space - and pushes each other down the page.
Your CSS looks like you are kinda fighting the nature of how the pages work.
Here's some other things to think about: https://jsfiddle.net/sheriffderek/7j3f2chw/
This question already has answers here:
Center image using text-align center?
(28 answers)
How to center image horizontally within a div element?
(23 answers)
Closed 4 years ago.
I was told to put a working code up that's why I have so much code up here but the part I am trying to focus on is aligning the top "resumania" logo in the center. When I put align: center; or text-align: center; it won't align. The class I am using for that is "logo." What am I doing wrong ??
<!DOCTYPE html>
<html>
<body>
<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--NEED HELP RIGHT HERE-->
</head>
<div class="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
</div>
<div class="col-md-8">
<h1 class="heading" align="center">Welcome to Resumania!</h1>
</div>
</div>
</div>
</div>
<a href=/Users/mtaslagyan/Desktop/resumania/majorlinks/testpage.html>check this out</a>
</body>
<style>
a {
color: #2d2d2d;
}
.logo{
width:200px;
border-radius:10px;
text-align: center;
}
.box{
width:100%;
background-color:#f6f6f6;
}
.heading{
color:navy;
padding: 80px 100px 0px 0px;
font-family: 'Ultra', serif;
}
</style>
</html>
One way is to wrap the <a> with a block element, like a <div> then you can use text-align:center
a {
color: #2d2d2d;
}
.wrapper {
text-align: center;
}
.logo {
width: 200px;
border-radius: 10px;
}
.box {
width: 100%;
background-color: #f6f6f6;
}
.heading {
color: navy;
padding: 80px 100px 0px 0px;
font-family: 'Ultra', serif;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="wrapper">
</div>
<div class="box">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="/Users/mtaslagyan/Desktop/resumania/images/cartoonmanquestion.JPG" alt="cartoon guy with a question mark above him">
</div>
<div class="col-md-8">
<h1 class="heading" align="center">Welcome to Resumania!</h1>
</div>
</div>
</div>
</div>
You can give the css property display:flex; align-items:center to your parent class (ie) for class "box"
try this.if you give the class logo for the a tag i mean the parent of your logo image that will be much better otherwise the a tag will be full width.
.logo {
width: 200px;
border-radius: 10px;
margin: 0 auto;
display: block;
}
You may refer to this jsfiddle.
enter code here
I have a a webpage that currently has a navigation bar on the top. I have been trying to create a layout underneath the navigation bar such as this:
Now left will be a "button" but really just a DIV that will be used to do something. Only one of the "Right" placeholders will actually contain text and the rest will be blank.
My issue is that I am not able to create this layout as I have in the picture. The closest I get is each "row" of left and right with now spacing between them.
Currently I have this for my code:
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Josh Schweigert - Contact</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<script src="contact.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="contact.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li>Home
</li>
<li>Embedded Systems
</li>
<li class="active">Contact
</li>
</ul>
</div>
</body>
</html>
Note that the formatting will be screwed up as I did not include the CSS code.
I have tried making an "outter" div and inside that div have "container" div's which then hold a div for "left" and a div for "right" sort of like this:
#outter {
Position: Relative;
}
.container {
position: relative;
}
.left {
float: left;
width: 30%;
}
.right {
float: left;
width: 70%;
}
<div id="outter">
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
But I am still not getting the result I want and I am thoroughly confused on how to achieve this layout. I appreciate any help!
I achieved this by making the following changes to your code:
Removed unnecessary position: relative; statements. They weren't doing anything in this context.
Removed floats
Changed .left and .right to display: inline-block;
Removed whitespace between divs as inline block is whitespace sensitive.
However this mightn't be the best solution because it's very unclear what your end goal is. If the idea is for the left column to be a vertical navbar then you would want that contained in its own element, and the main content in another. But again, it's not clear what the intent of the design is so I did it in as few changes as possible.
The box-sizing and other styles are just prettification so you can see that the code does lay out as specified in your image.
div {
box-sizing: border-box;
}
.left
{
width: 30%;
display: inline-block;
background-color: purple;
color: #fff;
padding: 15px;
}
.right
{
width: 70%;
display: inline-block;
background-color: red;
color: #fff;
padding: 15px;
}
<div id="outter">
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
<div class="container">
<div class="left">
left
</div><div class="right">
right
</div>
</div>
</div>
Please get your HTML structure correct to begin with. Also I made changes to your code to get the alignment you require here.
You need something like this:
.navbar {
background-color: #5983ff;
height: 35px;
width: 100%;
text-align: center;
margin-bottom: 15px;
}
.navbar-child {
width: 30%;
display: inline-block;
color: #fff;
font-size: 16px;
line-height: 35px;
}
.container {
margin-bottom: 15px;
height: 30px;
line-height: 30px;
border:2px solid #dd00ff;
}
.left {
float: left;
padding-left: 20px;
width: 15%;
color: #fff;
background-color: #dd00ff;
box-sizing: border-box;
}
.right {
float: left;
padding-left: 50px;
width: 85%;
color: #fff;
background-color: #ff0000;
box-sizing: border-box;
}
<div class="navbar">
<div class="navbar-child">
Home
</div>
<div class="navbar-child">
About
</div>
<div class="navbar-child">
Contact
</div>
</div>
<div class="body-section">
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
</div>
You could use flex with box-sizing: border-box:
.wrap{
display: flex;
flex-wrap: wrap;
}
nav, section, aside{
padding: 0.5rem;
}
nav{
width: 100%;
background: yellowgreen;
display:flex;
justify-content: space-around;
}
aside{
width: 30%;
background: blueviolet;
box-sizing: border-box;
}
section{
min-width: 70%;
background: pink;
box-sizing: border-box;
}
<div class="wrap">
<nav>
<div>Home</div>
<div>Forum</div>
<div>Contact</div>
</nav>
<aside>left</aside>
<section>right</section>
<aside>left</aside>
<section>right</section>
<aside>left</aside>
<section>right</section>
</div>
width: 100% gives the nav full width, flex warp let other items under it, box-sizing lets you give the exact width for left and right
You can read more on flex here.
Also a post of mine that might help you understand
Try this:
<div class="container">
<div class="left">
left
</div>
<!--Remove this space -->
<div class="right">
right
</div>
</div>
So I am using a template from DivTag Templates for Weebly. And I have gone to them for help and they said they can not help me because it is not an issue it is simply a customization. :( My client asked if the sidebar on the template can be moved from the right side to the left side. I said I believe so but will check.
The only CSS HTML I can find for the sidebar page is:
I can not find anywhere where it says that currently the sidebar is on the right.
The issue I have with weebly is they have their drag and drop areas on the pages, and I noticed that the sidebar has a separate drag and drop area.
HTML for that specific page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class='no-header wsite-theme-light'>
<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>
<div id="wrapper">
<div id="bar">
<div class="frame clearfix">
<div class="bar-text"><p>{call:text}</p></div>
<div id="search-button"><i class="af-search"></i></div>
<div class="social-frame">{social}</div>
<div class="search-bar">{search}</div>
</div>
</div>
<header id="header">
<div class="navContainer clearfix">
<div class="logo med-padding">{logo}</div>
<nav><div id="navigation">{menu}</div></nav>
</div>
</header>
<div id="main" role="main">
<div class="frame">
<div class="content table">
<div class="column32 table-content large-padding">{content} </div>
<div class="column3 table-content large-padding sidebar-content">{side:content}</div>
</div>
</div>
</div>
<footer>
<div id="footer" class="large-padding clearfix">
<div class="frame">
<div class="note" style="text-align: center;"><p>Drag & drop footer content here</p></div>
<div id="footer-content" class="med-padding">{bottom:content} </div>
<div id="footer-content" class="med-padding" style="display:none;">{footer}</div>
</div>
</div>
<div id="footer-bottom" class="feature small-padding">
<div class="frame">
<div class="copyright"><p>{copyright:text}</p></div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="/files/theme/basic-header.js"></script>
</body>
</html>
CSS:
/* --------------------------------------------------------------
LAYOUT
--------------------------------------------------------------- */
/* GENERAL */
.text-box-dark{
padding: 30px !important;
background: rgba(0,0,0,0.8) !important;
}
.text-box-light {
padding: 30px !important;
background: rgba(255,255,255,0.8) !important;
}
.xsmall-padding {
padding: 10px 0;
}
.small-padding {
padding: 20px 0;
}
.med-padding {
padding: 30px 0;
}
.large-padding {
padding: 45px 0;
}
.xlarge-padding {
padding: 65px 0;
}
.aligncenter {
text-align: center;
}
.sidebar-page div#content {
background: none;
width: 100%;
padding: 0;
}
.column2{
width: 50%;
min-width: 500px;
float: left;
}
.column3 {
width: 200px;
min-width: 200px;
min-height: 300px;
padding: 25px 20px;
background: url('sidebarbg.jpg');
border-left: 1px solid #eee;
vertical-align: top;
}
.column3 .weebly-area {
min-width: 200px;
min-height: 300px;
}
.column32 {
min-height: 300px;
min-width: 730px;
padding-right: 30px;
vertical-align: top;
}
div.sidebar-content {
min-height: 200px;
padding: 25px 45px;
}
.table{display: table;}
.table-content{display: table-cell;}
.center-content.table { height: 100%; margin: 0 auto;}
.center-content.table .table-content {vertical-align: middle;}
.overflow-hidden{overflow: hidden;}
.overflow-visible{overflow: visible;}
And when you find a solution. Can you explain to me why it needs to be a the way you are saying. I am trying to learn and the more knowledge I can soak up the better.
Thanks so much.
Yay got some good advice and figured I would share it with others
Move Column 3 above Column 32 on HTML
<div id="main" role="main">
<div class="frame">
<div class="content table">
<div class="column32 table-content large-padding">{content} </div>
<div class="column3 table-content large-padding sidebar-content">{side:content}</div>
</div>